vue3项目的路由报错

需求:Invalid route component at extractComponentsGuards (vue-router.esm-bundler.js:1987:27) at vue-router.esm-bundler.js:3143:22 路由二级正常,但是三级路由报错,路由是后端获取的动态路由

思路:先检查自己的router里面的单词是否拼写错误(如component写成components),还有组件的大小写,路由守卫配置等很常见的问题就不一一举例了;

比较不常见的就是由于依赖node_modules出现的问题,用旧的一份node_modules三级路由能正常跳转,自己npm或者pnpm拉取的依赖不能跳转

目录

一.先检查vue和vue-router版本是否兼容

1.查看官方文档中关于版本兼容性的说明：

2.检查路由配置是否兼容

3.Vite配置注意​​：不需要特殊配置，但需保持vite版本>2.0

 4.查看vue-router并安装可用版本(注意版本>4.1),4.1以上的路由写法如上

5.对比旧版本的node_modules(这个是有能运行的旧版本依赖)

二.比较推荐的方法(防止出现这种版本问题)

1.使用volta固定node以及所有依赖的版本

2.在package.json中使用固定版本号（移除^）

一.先检查vue和vue-router版本是否兼容

1.查看官方文档中关于版本兼容性的说明：

Vue Router 4 需要 Vue 3（https://router.vuejs.org/）

核对项目中package.json中vue和vue-router版本
// package.json 部分内容
"dependencies": {
  "vue": "^3.2.0",
  "vue-router": "^4.1.6"
}

2.检查路由配置是否兼容

在vue-router4.1以上的版本改写了路由路径写法,子路由不再以"/"开头,"/"开头的默认是从根路径开始(就要根据自己的项目选择对应的版本安装)

新版本中的正确配置示例​​：

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      // 二级路由
      { path: '', component: UserHome },
      // 三级路由配置（注意路径无斜杠）
      {
        path: 'profile', 
        component: UserProfile,
        children: [
          // 四级路由
          { path: 'security', component: SecuritySettings }
        ]
      }
    ]
  }
]

3.Vite配置注意​​：不需要特殊配置，但需保持vite版本>2.0

也不要忽略vite这个版本,出现这个bug主要检查vue和vue-route,次要检查vite,vite版本>2.0

 4.查看vue-router并安装可用版本(注意版本>4.1),4.1以上的路由写法如上

//查看可用版本
npm view vue-router versions

//安装指定版本
npm install vue-router@4.0.16

5.对比旧版本的node_modules(这个是有能运行的旧版本依赖)

5.1.在旧项目中生成依赖清单

npm ls --depth=0 > ./old_deps.txt

5.2.在新项目中生成清单

npm ls --depth=0 > ./new_deps.txt

5.3.比较差异

diff old_deps.txt new_deps.txt

###这样就能快速找到是那个插件版本造成的问题

二.比较推荐的方法(防止出现这种版本问题)

1.使用volta固定node以及所有依赖的版本

请转到这篇文章：Volta​的安装及其使用-CSDN博客

2.在package.json中使用固定版本号（移除^）

###最快的方法(也有可能没用)