Vue3使用vue-router报错Failed to resolve component: router-view问题问询

问题原因 #

你当前项目使用的是Vue 3版本，但安装的vue-router是3.x版本，vue-router 3.x仅支持Vue 2，Vue 3必须搭配vue-router 4.x版本使用，且路由的初始化API也有调整，所以会出现无法识别router-view组件的错误。

解决步骤 #

• 第一步：卸载旧版vue-router，安装适配Vue3的4.x版本
  执行命令：

  npm uninstall vue-router && npm install vue-router@4
  

  如果你使用yarn，执行：

  yarn remove vue-router && yarn add vue-router@4
  

• 第二步：修改main.js中的路由初始化代码
  调整后的完整main.js代码如下：

  import { createApp } from 'vue';
  // 引入vue-router4提供的创建路由和历史模式的API
  import { createRouter, createWebHistory } from 'vue-router';
  import { store } from './store';
  import App from './App.vue';
  import AuthHandler from './components/AuthHandler';
  
  // 用createRouter替代原来的new VueRouter创建路由实例
  const router = createRouter({
      // 用createWebHistory替代原来的mode: 'history'配置
      history: createWebHistory(),
      routes: [
          { path: '/oauth2/callback', component: AuthHandler }
      ]
  });
  
  const app = createApp(App)
  app.use(router)
  app.use(store)
  app.mount('#app')
  

• 第三步：重启本地开发服务，错误就会消失，router-view组件可以正常渲染。

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