vue-router重复push出现NavigationDuplicated问题解决

我们在学习vue-router的编程式导航时，我们发现如果多次重复点击某个按钮触发页面跳转，会出现如下“NavigationDuplicated”错误，这里我先贴上我的部分代码：

// template中菜单按钮
博客

// 对应的click事件的跳转方法
toBlog(){
	this.$router.push("/blog");
}

// 路由配置
{
	name:"Blog",
	path:"/blog",
	component:()=>import('@/components/Blog.vue')
}

连续多次点击博客按钮，会出现如下错误：
[v_error]NavigationDuplicated: Avoided redundant navigation to current location: “/blog”.[/v_error]

虽然对代码运行没有任何影响，但是看上去还是很不爽！
[v_act]1、问题出现原因：[/v_act]
重复路由跳转，我们当前路由是博客页面/blog，但是再点击博客按钮进行this.$router.push操作，要跳转的页面还是/blog博客页面。
[v_act]2、解决办法有两种：[/v_act]
1）升级vue-router版本为3.0即可解决，打开项目终端运行如下命令：

npm i vue-router@3.0 -S

2）修改VueRouter原型对象上的push方法，在router文件夹下的index.js中的Vue.use(VueRouter)代码下方加入如下代码：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

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