同父级目录动态路由优先级配置：指定_id下_slug.vue优先匹配路径

问题原因 #

你当前的目录结构对应的默认路由规则优先级为：

• _filter.vue 匹配 /consultations/:filter（2层路径），规则更短所以优先级更高
• _id/_slug.vue 匹配 /consultations/:id/:slug（3层路径）
  你访问的 /consultations/1234 属于2层路径，因此会优先命中_filter.vue。

解决方案 #

方案1：添加动态路由正则校验（推荐） #

通过正则限制id的匹配规则，让符合id格式的路径优先命中_id目录下的路由，其余路径命中_filter.vue：

Nuxt3 配置

1. 将_id目录重命名为[id:([0-9]+)]（括号内为id的匹配正则，可根据你的id规则调整，示例为仅匹配数字id）
2. 在_slug.vue头部添加配置，让2层路径也能匹配到该组件：

definePageMeta({
  alias: ['/consultations/:id']
})

如果你需要/consultations/:id和/consultations/:id/:slug对应不同逻辑，可以直接在_id目录下新增index.vue编写2层路径的逻辑，不需要给_slug.vue加别名。

Nuxt2 配置

在nuxt.config.js中扩展路由规则：

export default {
  router: {
    extendRoutes(routes, resolve) {
      // 调整路由顺序，将id相关路由放到filter路由前面
      const filterRouteIdx = routes.findIndex(route => route.path === '/consultations/:filter')
      const idRouteIdx = routes.findIndex(route => route.path.includes('/consultations/:id'))
      if (filterRouteIdx > -1 && idRouteIdx > -1) {
        const idRoute = routes.splice(idRouteIdx, 1)[0]
        routes.splice(filterRouteIdx, 0, idRoute)
        // 给id路由添加正则校验
        idRoute.regex = /^\/consultations\/\d+(\/.*)?$/
      }
    }
  }
}

方案2：手动调整路由优先级 #

如果不需要正则校验，直接调整两类路由的优先级即可：

Nuxt3 配置

在_slug.vue头部添加优先级配置：

definePageMeta({
  order: -1, // 值越小优先级越高
  alias: ['/consultations/:id']
})

在_filter.vue头部添加：

definePageMeta({
  order: 10
})

Nuxt2 配置

直接使用方案1中Nuxt2的路由扩展代码，去掉正则配置部分即可。

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