Nuxt2嵌套路由场景下如何实现程序化导航？

我来帮你解决这个嵌套路由的导航问题，你遇到的核心问题是对Nuxt自动生成的命名路由规则不熟悉，以及相对路径的使用误区，下面一步步给你梳理清楚：

首先搞懂Nuxt2的命名路由规则 #

你之前尝试用组件名（比如ExchangesPage）作为命名路由是无效的，因为Nuxt2是根据pages目录结构自动生成命名路由的，规则如下：

• 根目录的index.vue命名为index
• 子目录的页面，命名是「父目录名-子页面标识」，其中动态路由（比如_userId）会保留下划线转成连字符
• 每个目录下的index.vue会直接用目录名作为路由标识的一部分

对应你的pages结构，各个页面的正确命名路由是：

• HomePage（pages/index.vue）：index
• ExchangesPage（pages/exchanges/index.vue）：exchanges
• EachExchangePage（pages/exchanges/_userId/index.vue）：exchanges-_userId
• CreateExchangePage（pages/exchanges/create/index.vue）：exchanges-create

小技巧：开发环境下，你可以访问/___nuxt/router.js查看Nuxt自动生成的完整路由配置，里面会列出所有路由的name和path，方便核对。

解决方案1：使用命名路由跳转（推荐） #

用命名路由跳转是最稳妥的方式，不用担心路径拼接错误，示例代码如下：

• 跳转到创建Exchange页面：

  this.$router.push({ name: 'exchanges-create' })
  

• 跳转到某个用户的Exchange详情页（需要传动态参数）：

  this.$router.push({ 
    name: 'exchanges-_userId', 
    params: { userId: '123' } // 替换成实际的用户ID
  })
  

解决方案2：正确使用路径跳转避免重复追加 #

你之前用path: "exchanges/create"是相对路径，所以会自动追加到当前URL后面。要改成绝对路径（开头加斜杠），这样就会从根目录开始匹配：

• 绝对路径写法：

  // 两种写法都可以
  this.$router.push({ path: "/exchanges/create" })
  this.$router.push("/exchanges/create")
  

额外技巧：避免重复跳转 #

如果不想在已经处于目标路由时重复执行跳转，可以先判断当前路由的name或path：

// 用命名路由判断
if (this.$route.name !== 'exchanges-create') {
  this.$router.push({ name: 'exchanges-create' })
}

// 或者用路径判断
if (this.$route.path !== '/exchanges/create') {
  this.$router.push('/exchanges/create')
}

内容的提问来源于stack exchange，提问作者 Alex