Nuxt 3同层级双动态路由配置：解决分页与商品详情路由冲突

问题根源是Nuxt 3默认的动态路由没有参数格式约束，导致/dresses/2这类带数字的URL会被[slug].vue优先匹配。要实现预期的路由区分，需要给两个页面的路由参数添加正则匹配规则，具体操作如下：

1. 给列表页[[page]].vue添加参数约束 #

在[[page]].vue的<script setup>中，通过definePageMeta指定page参数必须是数字（且可选）：

<script setup>
definePageMeta({
  params: {
    page: {
      // 匹配1个或多个数字
      pattern: '^\\d+$',
      // 允许参数为空（对应首页/dresses）
      optional: true
    }
  }
})
</script>

2. 给商品详情页[slug].vue添加参数约束 #

根据你描述的slug格式（商品编码+名称，包含连字符），在[slug].vue的<script setup>中指定slug必须包含至少一个连字符：

<script setup>
definePageMeta({
  params: {
    slug: {
      // 匹配包含至少一个连字符的任意字符串
      pattern: '^.+-.+$'
    }
  }
})
</script>

如果需要更严格的slug规则（比如必须以数字编码开头），可以把pattern改成^\\d+-.*$，确保slug符合数字编码-商品名称的格式。

效果验证 #

调整后路由匹配逻辑会按规则区分：

• /dresses、/dresses/1、/dresses/2 会匹配[[page]].vue
• /dresses/1235-nice-dress-for-the-party、/dresses/6703-pink-dress-made-of-cotton 会匹配[slug].vue

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