安装vue-router及报错问题

一、安装vue-router

1、安装vue-router依赖

npm install vue-router@3

2、引入vue-router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入
 
// 将router注入vue
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

 @/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router' // 引入vue-router
import homeView from '../components/pages/home/index.vue'  // 路由懒加载
 
Vue.use(VueRouter) // 在Vue中注册VueRouter
 
const routes = [{
  path: '/',
  name: 'home',
  component: homeView
},
]
 
const router = new VueRouter({
  mode: 'history', // 路由模式
  base: process.env.BASE_URL,  // 基础地址
  routes
})
 
export default router   //导出router

二、安装vue-router报错“Cannot read properties of undefined (reading ‘install‘) at Vue.use” 的解决方案

        我在项目中引入了vue-router，但是页面中报错“Cannot read properties of undefined (reading ‘install‘) at Vue.use” 

错误原因：vue 版本和 vue-router 版本不匹配。
        我的项目是 vue2.7，安装 vue-router 时，直接运行了 npm install vue-router 命令，造成直接下载最新版 vue-router 4.1.6，而 4 以后的版本适用于 vue3.0 版本，用在 vue2.0+ 会报错。

解决方案： 在项目根目录下打开CMD，分别运行如下命令并重启项目即可：

1. npm uninstall vue-router

2. npm install --save vue-router@3