nuxt同级动态路由，怎么区分？

nuxt中目录下有两个同级别的动态路由
使用可以正常跳转到_name.vue中
但是一刷新页面就会跳转到_id.vue中
这要怎么解决？

img

参考GPT和自己的思路：

在 Nuxt 中，同一级别的动态路由是根据路由名称的匹配来决定跳转到哪个组件中的。因此，在解决您的问题之前，需要先确认路由名称是否正确。同时，如果您的动态路由参数中包含了数字，请尝试添加正则表达式以区分路由。

具体来说，您可以在 nuxt.config.js 中配置动态路由参数的正则表达式，例如：

// nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'dynamic-route',
        path: '/:type(\\d+)/:id(\\d+)?',
        component: resolve(__dirname, 'pages/_type.vue')
      })
    }
  }
}

上述配置表示动态路由参数 type 和 id 都是数字类型，其中 id 参数是可选的。

此外，您也可以考虑使用不同的路由名称来区分同级别的动态路由，例如：

// nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'dynamic-route-1',
        path: '/route1/:id',
        component: resolve(__dirname, 'pages/route1.vue')
      }, {
        name: 'dynamic-route-2',
        path: '/route2/:id',
        component: resolve(__dirname, 'pages/route2.vue')
      })
    }
  }
}

在上述配置中，我们将同级别的动态路由分别命名为 dynamic-route-1 和 dynamic-route-2，这样即使它们的参数名称和类型相同，Nuxt 也能够正确地区分它们。

现在是可以区分跳转，就是手动刷新以后就会跳转到同一级别的动态路由中
跳转到_id.vue中。手动刷新就会跳转到_catelist.vue中，也是在router.js中靠前的

img

img