首页 > 解决方案 > 如何在 Nuxt js 中使用命名路由?

问题描述

问题

嵌套路由时,如何以 Nuxt 用户的身份以编程方式导航?我知道我可以this.$router.push({ name: "exchanges" })用来将用户推送到交换页面,但是当路由嵌套时,我不知道该怎么做。如果我使用this.$router.push({ path: "exchanges/create" })or 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.jsnuxt.jsvue-router

解决方案


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

在您的项目目录中导航到此:

.nuxt/router.js

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

在此处输入图像描述

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

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

推荐阅读