我们在学习vue-router
的编程式导航时,我们发现如果多次重复点击某个按钮触发页面跳转,会出现如下“NavigationDuplicated”错误,这里我先贴上我的部分代码:
// template中菜单按钮 <button @click="toBlog">博客</button> // 对应的click事件的跳转方法 toBlog(){ this.$router.push("/blog"); } // 路由配置 { name:"Blog", path:"/blog", component:()=>import('@/components/Blog.vue') }
连续多次点击博客按钮,会出现如下错误:
NavigationDuplicated: Avoided redundant navigation to current location: “/blog”.

虽然对代码运行没有任何影响,但是看上去还是很不爽!
1、问题出现原因:
重复路由跳转,我们当前路由是博客页面
/blog
,但是再点击博客按钮进行this.$router.push
操作,要跳转的页面还是/blog
博客页面。2、解决办法有两种:
1)升级vue-router版本为3.0即可解决,打开项目终端运行如下命令:
npm i vue-router@3.0 -S
2)修改VueRouter
原型对象上的push
方法,在router
文件夹下的index.js
中的Vue.use(VueRouter)
代码下方加入如下代码:
//获取原型对象上的push函数 const originalPush = VueRouter.prototype.push //修改原型对象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }