一、安装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,分别运行如下命令并重启项目即可:
npm uninstall vue-router
npm install --save vue-router@3