如何在 Nuxt js 中使用命名路由？答案

【问题标题】：How to use named routes in Nuxt js?如何在 Nuxt js 中使用命名路由？
【发布时间】：2021-03-29 15:40:21
【问题描述】：

问题

当路由嵌套时，如何以 Nuxt 用户的身份以编程方式导航？我知道我可以使用this.$router.push({ name: "exchanges" }) 将用户推送到交换页面，但是当路由嵌套时，我不知道该怎么做。如果我使用this.$router.push({ path: "exchanges/create" }) 或this.$router.push("exchanges/create")，“exchanges/create”会被添加到 URL，即使我已经在当前 URL。

此外，页面组件名称为“ExchangesPage”、“EachExchangePage”、“CreateExchangePage”和“HomePage”。当我尝试将其用作命名路由的名称时，这不起作用。

./pages 中的当前文件结构

pages/
--| exchanges/
-----| _userId/
--------| index.vue
-----| create/
--------| index.vue
--| index.vue

【问题讨论】：

标签： vue.js nuxt.js vue-router

【解决方案1】：

要快速检查您在 nuxt 项目中的路线，您可以这样做：

在你的项目目录中导航到这个：

.nuxt/router.js

这是 nuxt 生成的所有路线的文件，您可以检查它们的确切名称以导航到它们，看看这张图片：

根据上面来自我的一个项目的图片，我可以这样做：

this.$router.push({ name: 'universities-id' });

【讨论】：

【解决方案2】：

基于docs，嵌套路由的名称为：

pages/
--| exchanges/
-----| _userId/
--------| index.vue             // name: 'exchanges-userId'
-----| create/
--------| index.vue             // name: 'exchanges-create'
--| index.vue

示例脚本用法：

this.$router.push({ name: 'exchanges-userId', params: { userId: 11 } })
this.$router.push({ name: 'exchanges-create' })

模板使用示例：

<nuxt-link :to="{ name: 'exchanges-userId', params: { userId: 11 } }">User 11</nuxt-link>
<nuxt-link :to="{ name: 'exchanges-create' }">Create</nuxt-link>

【讨论】：

【解决方案3】：

除了上面给出的提示之外，您还可以在 Vue 开发工具的 Routing > Routes 选项卡中看到这一点。那里的一切都应该可以访问！

【讨论】：