Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法

点击vue路由跳转,控制台报错:Avoided redundant navigation to current location: “/xxxxxx“解决方法

一、描述问题

在使用this.$router.push跳转页面时候,重复点击菜单引起路由重复报错

比如当前页面显示区是路由组件‘/cats’,重复点击按钮进行this.$router.push跳转,要跳转的组件仍然是‘/cats’,那么控制就会报如下错误:

Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法_第1张图片

二、报错原因

由于 vue-router3.0 及以上版本回调形式改成Promise API的形式了,返回的是一个Promise 。也是说 push和replace都是Promise类型了。

而Promise的回调函数resolve和reject,必须传其中一个,否则会报错。如果路由地址跳转相同,且没有捕获到错误,控制台始终会出现上图所出现的问题。​

三、解决方法

1、安装vue-router3.0以下版本

先卸载3.0以上版本然后再安装旧版本

npm i @vue-router2.8.0

2、为每一个Promise添加一个回调函数

缺点:每个路由跳转都要添加回调函数

this.$router.push({
   name: 'Cats',
 }, () => {})

3、修改VueRouter原型对象上的push/replace方法

在router/index.js文件中添加如下代码

// 获取原型对象push函数
const originalPush = VueRouter.prototype.push

// 获取原型对象replace函数
const originalReplace = VueRouter.prototype.replace

// 修改原型对象中的push函数
VueRouter.prototype.push = function push(location){
return originalPush.call(this , location).catch(err=>err)
}

// 修改原型对象中的replace函数
VueRouter.prototype.replace = function replace(location){
return originalReplace.call(this , location).catch(err=>err)
}

四、原理分析

const originalReplace = VueRouter.prototype.replace

VueRouter.prototype.replace = function replace(location){
return originalReplace.call(this , location).catch(err=>err)
}

location :一个保存了当前要跳转路径的对象;

call()函数:可以在调用函数的同时改变this的指向,常用于实现继承,
两个参数:
this:由于call处于原型对象内部,所以此处this指向的是当前VueRouter的实例对象;而originalPush指向的是VueRouter.prototype.push,旨在于调用当前VueRouter实例对象中的push方法;
location:在方法调用时传入获取到的location。

catch:链式调用catch方法,目的是在方法执行时,捕获错误。
在js机制中,catch捕获到Exception时,代码还会继续向下执行。所以此处的catch未作任何操作,代码也会继续向下执行,和抛给浏览器的错误其实时一致的

五、额外补充

1、路由导航方式

声明式 编程式
$router.push(...)

编程式导航:即 $router.push$router.replace$router.forward()$router.back()$router.go()

2、Promise函数

① Promise是一个构造函数
可以使用new 创建一个Promise实例 //eg:const p = new Promise()
每一个Promise实例对象代表一个异步操作

② Promise.prototype上包含一个.then()方法
每一个new Promise()构造函数得到的实例对象都可以通过原型链的方式访问到.then()方法 //eg:p.then()

③ .then()方法用来预先指定成功或失败的回调函数
p.then(成功回调,失败回调)
调用.then()方法时,成功的回调函数是必选的,失败回调是可选的

你可能感兴趣的:(vue,javascript,前端,vuex,学习)