Vue启动时报错的解决方案，以及解决相同路径跳转报错的问题

一、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
})