Nuxt结合Strapi i18n生成静态站时动态深层路由组件匹配错误如何解决

问题原因 #

Nuxt路由匹配遵循先定义先匹配规则，自动生成的路由中/:cases/:slug?定义顺序早于/:news/:slug?，且两个路由结构完全一致，动态参数不会校验传入值的内容，所以所有/xxx/xxx结构的路径都会优先匹配先出现的cases路由，自然会加载_cases目录下的组件。

解决方案 #

方案1：配置i18n自定义路由路径（最适配多语言场景，推荐）

不用保留动态命名的_cases、_news目录，直接改为固定命名的目录结构：

pages/
  cases/
    _slug.vue  # 案例页
  news/
    _slug.vue  # 新闻页
  _slug.vue    # 其他页面
  index.vue    # 首页

之后在nuxt.config.js的i18n配置中添加路由本地化规则，指定不同语言下的路径前缀：

// nuxt.config.js 配置示例
export default {
  i18n: {
    // 其余原有i18n配置不变
    pages: {
      'cases/_slug.vue': {
        en: '/cases/:slug',
        da: '/case/:slug'
      },
      'news/_slug.vue': {
        en: '/news/:slug',
        da: '/nyheder/:slug'
      }
    }
  }
}

这种方式生成的路由是固定前缀的，优先级高于通用动态路由/:slug，不会出现匹配冲突。

方案2：扩展路由添加参数正则约束

如果不想改动现有目录结构，可以通过extendRoutes手动给动态路由添加参数匹配规则，限定cases、news参数的有效值：

// nuxt.config.js 配置示例
export default {
  router: {
    extendRoutes(routes) {
      routes.forEach(route => {
        // 给cases路由加参数校验
        if (route.name.includes('cases-slug')) {
          route.path = route.path.replace(':cases', ':cases(cases|case)')
        }
        // 给news路由加参数校验
        if (route.name.includes('news-slug')) {
          route.path = route.path.replace(':news', ':news(news|nyheder)')
        }
      })
    }
  }
}

添加正则约束后，只有路径前缀符合对应语言的有效值时才会命中对应路由，不会出现混淆。

内容的提问来源于stack exchange，提问作者Simon Kibsgård