Vue/Nuxt路由问题：特定路由刷新时加载错误组件的原因是什么？

问题根因 #

该问题由Nuxt自动生成路由的匹配优先级规则导致：

• Nuxt会基于pages目录的文件结构自动生成vue-router路由配置，路由规则默认排序逻辑为：静态命名路由优先级高于含动态参数段的路由，同类型路由按文件/目录名的字典序排序。
• 点击<NuxtLink>跳转时，是显式指定了目标路由的名称和参数，会精准命中对应路由规则；但页面刷新时，会直接用当前URL按顺序匹配路由规则，排在前面的规则会优先命中。
• 你遇到的场景就是当前访问路径同时匹配了两条路由规则：一条是Profile设置页的动态路由，另一条是Post详情页的路由，而Post详情页的路由规则在自动生成的配置中排序更靠前，因此刷新时会优先渲染Post详情组件。

修复方案 #

方案1：添加路由前缀避免冲突 #

给优先级更高的Profile设置页动态路由添加固定路径前缀，从根源避免匹配冲突：
比如将原pages/_user/_settings.vue目录结构调整为pages/profile/_user/_settings.vue，生成的路由变为/profile/:username/:settingsTab，和Post类路由完全区分，不会再出现匹配冲突。

方案2：自定义路由排序 #

如果不想调整现有目录结构，可以在nuxt.config.js中通过router.extendRoutes配置手动调整路由的排序，将需要更高优先级的Profile路由放到Post详情路由之前：

// nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      // 查找Profile设置页和Post详情页对应的路由配置，调整顺序
      const profileRouteIndex = routes.findIndex(route => route.name === 'xxx') // 替换为实际Profile路由的name，可打印routes数组查看
      const postRouteIndex = routes.findIndex(route => route.name === 'yyy') // 替换为实际Post详情路由的name
      if (profileRouteIndex > postRouteIndex) {
        const profileRoute = routes.splice(profileRouteIndex, 1)[0]
        routes.splice(postRouteIndex, 0, profileRoute)
      }
    }
  }
}

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