一、Vue启动时报错
Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)
启动项目时出现这个错误,检查了下是自己的vue-router安装的版本错误,我写的项目是vue2,vue-router安装的是4.x版本(这是vue3的),版本过高需要卸载重装。
执行卸载
npm uninstall vue-router
如果报错,换成下面
npm uninstall vue-router --legacy-peer-deps
接着安装vue2对应的3.x版本的vue-router版本号
npm install --save vue-router@3
错误解决,启动项目就成功了~
二、相同路径跳转报错
编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?(VueRouter3中的问题(vue2使用),VueRouter4已修复(vue3使用)
注意:编程式导航(push|replace)才会有这种情况的异常,
在router的index.js里面写,在use之前,如果加上以下代码,报错‘Cannot read properties of undefined (reading ‘catch’) at VueRouter.push ’那就是vue-router的版本问题,安装高一点的版本即可3.1.6以上
// 保存原来的push函数 const originalPush = Router.prototype.push; // 重写push函数 Router.prototype.push = function push(location) { // return originalPush.call(this, location).catch(err => err); // 这个if语句在跳转相同路径的时候,在路径末尾添加新参数(一些随机数字) // 用来触发watch if(typeof(location)=="string"){ var Separator = "&"; if(location.indexOf('?')==-1) { Separator='?'; } location = location + Separator + "random=" + Math.random(); } // 这个语句用来解决报错 // 调用原来的push函数,并捕获异常 return originalPush.call(this, location).catch(error => error); }; Vue.use(Router);
完整代码
import VueRouter from 'vue-router' // 解决报错 const originalPush = VueRouter.prototype.push const originalReplace = VueRouter.prototype.replace // push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(error => error); } // replace VueRouter.prototype.replace = function push (location) { return originalReplace.call(this, location).catch(error => error); } Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes })