Nuxt 3多层嵌套动态路由配置问题：路由匹配不符合预期

问题原因 #

Nuxt3基于文件系统生成路由时，当两个路由文件的路径模式完全重叠（比如/[category]/[slug]和/[category]/[sub-category]），会按默认规则优先匹配排序靠前的文件，导致你期望的pages/[category]/[sub-category]/index.vue被pages/[category]/[slug].vue抢占了匹配权。

解决方案 #

方案1：通过页面元数据设置路由优先级 #

给目标页面设置更高优先级，强制Nuxt优先匹配它：

• 在pages/[category]/[sub-category]/index.vue中添加：

<script setup>
definePageMeta({
  priority: 1 // 数值越高优先级越高，默认值为0
})
</script>

• 同时在pages/[category]/[slug].vue中降低优先级：

<script setup>
definePageMeta({
  priority: -1
})
</script>

方案2：自定义路由规则（全局配置） #

在nuxt.config.ts中手动定义路由规则，明确指定路径与组件的对应关系：

export default defineNuxtConfig({
  router: {
    routes: (defaultRoutes) => [
      // 优先注册目标路由
      {
        path: '/:category/:sub-category/',
        component: () => import('~/pages/[category]/[sub-category]/index.vue'),
        priority: 1
      },
      // 再注册其他路由
      {
        path: '/:category/:slug/',
        component: () => import('~/pages/[category]/[slug].vue'),
        priority: -1
      },
      // 保留Nuxt默认生成的其他路由
      ...defaultRoutes
    ]
  }
})

方案3：调整目录结构（避免模糊匹配） #

如果允许修改路由路径，可将[slug].vue移入子目录，比如pages/[category]/item/[slug].vue，对应路由变为/fruits/item/a-healthy-fruit，从根源避免路径模式重叠。

注意事项 #

修改后建议删除.nuxt目录并重启项目，清除路由缓存确保配置生效。

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