如何在Nuxtjs中使用命名路由?
问题
嵌套路由时,如何以用户身份在 Nuxt 中以编程方式导航?我知道我可以this.$router.push({ name: "exchanges" })
用来将用户推送到交换页面,但是当路由嵌套时,我不知道该怎么做。如果我使用this.$router.push({ path: "exchanges/create" })
或this.$router.push("exchanges/create")
,即使我已经在当前 URL 中,“exchanges/create”也会被添加到 URL 中。
此外,页面组件名称是“ExchangesPage”、“EachExchangePage”、“CreateExchangePage”和“HomePage”。当我尝试将它用作命名路由的名称时,这不起作用。
./pages 中的当前文件结构
pages/
--| exchanges/
-----| _userId/
--------| index.vue
-----| create/
--------| index.vue
--| index.vue
回答
要快速检查您在 nuxt 项目中的路线,您可以执行以下操作:
在您的项目目录中导航到:
.nuxt/router.js
这是包含由 nuxt 生成的所有路由的文件,您可以检查它们的确切名称以导航到它们,请看这张图片:
根据上图来自我的一个项目,我可以这样做:
this.$router.push({ name: 'universities-id' });
回答
根据docs,嵌套路由的名称将是:
pages/
--| exchanges/
-----| _userId/
--------| index.vue // name: 'exchanges-userId'
-----| create/
--------| index.vue // name: 'exchanges-create'
--| index.vue
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' })