vue重复点击路由报错问题

重复点击路由报错

vue-router.esm.js?a5e4:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/shop/marketing-center/activity-center"
解决方案：
1、在router文件中增加如下判断

const router = new VueRouter({
    routes: []
})

// 解决重复点击相同路由报错问题
const VueRouterPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push (to) {
    return VueRouterPush.call(this, to).catch(err => err);
}
export default router;

2、路由跳转时判断是否重复跳转

handleClickMenu(menu) {
  if(this.$route.path !== menu.url){
    this.$router.push({path: menu.url});
  }
}

3、使用catch方法捕获router.push异常

this.$router.push(route).catch(err => {
  console.log('输出报错', err);
})