如何在Nuxt js中使用命名路由?

2022-02-25 00:00:00 vue.js vue-router nuxt.js

问题

当路线嵌套时,如何以用户身份在Nuxt中以编程方式导航?我知道我可以使用this.$router.push({ name: "exchanges" })将用户推送到交换页面,但是当路由嵌套时,我不确定该怎么做。如果我使用this.$router.push({ path: "exchanges/create" })this.$router.push("exchanges/create"),即使我已经位于当前URL,也会将&exchanges/create";添加到该URL。

此外,页面组件名称为";ExchangesPage";、";EachExchangePage";、";CreateExchangePage";和";主页";。当我尝试将其用作命名路由的名称时,这不起作用。

./Pages中的当前文件结构

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

解决方案

要快速检查Nuxt项目中的路由,您可以执行以下操作:

在您的项目目录中,导航到以下位置:

.nuxt/router.js

这是由nuxt生成的包含所有路由的文件,您可以检查它们的确切名称以导航到它们,请查看此图片:

根据上图(来自我的一个项目),我可以这样做:

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

相关文章