一、问题出现及其出现原因
在使用this.$router.push进行路由的跳转时,出现如下报错:
问题出现原因:重复路由跳转,比如说当前路由是首页/index,但是点击按钮进行this.$router.push操作,要跳转的还是首页/index。
二、问题解决
方式一:升级vue-router版本为3.0即可解决,项目目录下运行命令:
npm i vue-router@3.0 -S
方式二:修改VueRouter原型对象上的push方法,在router文件夹下的index.js中加入如下代码:
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
console.log('location',location)
return originalPush.call(this, location).catch(err => err)
}
插入位置:
三、原理
1.cation
通过打印,可得知这个location就是一个保存了当前要跳转路径的对象,打印结果如下:
2.call的使用
call()函数可以在调用函数的同时,来改变this的指向,常用于实现继承。
第一个参数this,由于call处于原型对象内部,所以此处this指向的是当前VueRouter的实例对象。而originalPush指向的是VueRouter.prototype.push。 旨在于调用当前VueRouter实例对象中的push方法。
第二个参数location,在方法调用时传入获取到的location。
3.atch
链式调用catch方法。旨在在方法执行时,捕获错误。在js机制中,catch捕获到Exception时,代码还会继续向下执行。所以此处的catch未作任何操作,代码也会继续向下执行。