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

标签 vue.js nuxt.js vue-router

问题
嵌套路由时,如何以用户身份在 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

最佳答案

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

.nuxt/router.js
这是包含由 nuxt 生成的所有路由的文件,您可以检查它们的确切名称以导航到它们,请看这张图片:
enter image description here
根据上图来自我的一个项目,我可以这样做:
this.$router.push({ name: 'universities-id' });

关于vue.js - 如何在 Nuxt js 中使用命名路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65366277/

相关文章:

vue.js - base 选项在 vue-router 中是如何工作的

plugins - sublime text 3中Vue模板中Pug语法高亮的方法

javascript - Vue.js + Chartist : Using charts in a component

vue.js - 如何在 Nuxt/Vuetify 入门模板上更改主题颜色

vue.js - 如何在重定向 vue-router 后显示 flash 消息

javascript - 如何在安全网站上找到不可见的混合内容问题?

javascript - Vuex:变异中的方括号是什么意思?

javascript - [Vue警告] : Error in beforeCreate hook: "ReferenceError: document is not defined"

nuxt.js - 出现错误 "defineNuxtConfig is not defined"

vue.js - Nuxt.js 的动态元