vue3报错“ Uncaught TypeError: Cannot read property ‘use‘ of undefined”

在跟着视频学习用vue配置路由时，在路由文件中使用Vue.use(router)的语句无法正常启动服务，并且浏览器报错，提示‘use’并未定义；看了一下，如下图，vue中没有use（）这个方法

经过查找资料后发现，这种加载vue-router的方式是vue2使用的，但我现在用的是vue3（跟着视频创建项目时老师说vue3更新的东西也不会对我们的项目产生什么影响之类的，喜新厌旧的我就直接用了vue3，导致和课程配置不一样了）。因此，我现在需要使用vue3的方式来导入vue-router。

首先，在路由文件里，我们已经不再需要通过下面这三句程序来导入vue-router了,下面这三句话要删掉：

import Router from 'vue-router'
import Vue from 'vue'

Vue.use(Router)

 然后如下图，加上红框内的代码：

import {createRouter, createWebHistory} from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({
    history: routerHistory,
     /*
      *   在这里和vue2一样写路由配置
     */
}

再然后，需要在main.js里作路由导入：

import {createApp} from 'vue'
import router from './router'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

 

ok，到了这一步其实vue3关于vue-router的导入已经完成了，可是运行项目时仍然会报错，提示下图中的createWebHistory不是一个function；查看了vue-router源文件后发现并没有我们所需要导入的两个方法。

这个时候的话可以考虑一下是不是vue-router的版本不对，查看package.json文件后发现，我所安装的vue-router版本是3.5.1；但根据我找到的资料来看，需要4.0以上的版本才能适配，所以通过下面的命令安装了v4的vue-router

npm install vue-router@4

最后，我的项目就成功运行起来了，撒花；接着，来一波参考链接，感谢！