Nuxt SSR路由问题：vue-router重复命名路由定义及刷新跳转异常

• Nuxt框架默认会自动扫描pages目录下的文件自动生成路由规则，你同时通过router.extendRoutes手动添加了自定义路由，两套路由存在同名的name字段，所以触发[vue-router] Duplicate named routes definition警告。
• 路由重复后匹配逻辑混乱，是导致你刷新页面跳转异常的直接原因；另外你手动定义的商铺详情页路径为/sklepy/:id，但你访问的是/shops/4kom，路径不匹配也会引发跳转问题。

方案一：关闭自动路由（适合需要完全自定义路由规则的场景） #

直接在nuxt.config.js的router配置项中添加parsePages: false关闭自动路由生成，避免和你手动定义的路由冲突，修改后的配置如下：

// nuxt.config.js 中router部分修改为
router: {
  parsePages: false, // 关闭Nuxt自动生成路由能力
  extendRoutes(nuxtRoutes, resolve) {
    routes.forEach((route) => {
      nuxtRoutes.push({
        name: route.name,
        path: route.path,
        component: resolve(__dirname, route.component)
      })
    })
  }
}

修改后如果需要访问/shops/4kom格式的地址，同步把routes/index.js里shop-page对应的path改为/shops/:id即可。

方案二：使用Nuxt约定式路由（适合不想手动维护路由表的场景） #

删除你自定义的routes/index.js文件，同时删掉nuxt.config.js里的router.extendRoutes逻辑，按照Nuxt的路由约定命名pages下的文件即可：

• 商铺列表页 /sklepy 对应文件 pages/sklepy/index.vue
• 商铺详情页 /sklepy/:id 对应文件 pages/sklepy/_id.vue
  Nuxt会自动生成对应路由，不会出现重复冲突问题。

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