VueRouter点击相同路由报错
原因
可能是vue在3.0以上的版本中的错误提示,不允许从当前路由跳转到当前路由,点击重复路由产生的报错信息; 回调形式改成promise api了,返回的是promise,如果没有捕获到错误,控制台始终会出现如上图的警告。
报错信息
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".
解决办法
1.vue-router进行降级 (不推荐使用)
1).卸载原有版本安装新版本
shell script
npm uninstall vue-router
npm i vue-router@3.0.0
2).直接安装对应版本
shell script
npm i vue-router@3.0 -S
2.在让router.js中增加如下代码,重写原型上的push方法,统一处理错误信息。(推荐)
//解决 点击相同路由报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
//如push没有效果可将push改为replace
const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};
3.在每个使用this.$router.push跳转时,使用 catch 方法捕获 router.push 异常。
this.$router.push(route).catch(err => {
console.log('输出报错',err)
})
4.补齐router.push()的第三个参数
this.$router.push(route, () => {}, (e) => {
console.log('输出报错',e)
})