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-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-link :to="..."> | $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】错误 : 无法加载文件 C:UsersAdministratorAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本的解决方法
- 【Vue】vue中VM的生命周期及加载和销毁实例
- vue基础篇---路由的实现
- vue路由
- Vue - 完美解决小数的四则运算(加减乘除)导致精度丢失问题,提供详细计算示例代码vue数据计算丢失精度
- vue-router路由嵌套与二级路由重定向
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- Vue富文本编辑器的使用vue-quill-deitor
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法
- springboot+vue社区维修平台(源码+文档)
- Vue中自定义指令总结及封装一个类似于v-bind的自定义指令
- Vue学习第34天——路由的2种工作模式:hash和history的区别
- Vue学习第27天——路由vue-router的详解及案例练习
- vue-Prop
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue: 无法加载文件 C:UsersxxxAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅请参阅 https:/go.micr