一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者,可拜上将军也。
前言
当连续点击同一个路由跳转 BUTTON 时,报了如下错误:
解决思路
我的第一反应就是重写 Router 实例原型上挂载的 push 方法,首先打印实例对象的原型对象,如图:
代码如下:
// 修改原型对象中的push方法 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
再仔细想想,既然这是一个报错,为啥不直接载 catch 中捕获呢?而不用重写 push 方法
this.$router.push(path).catch(err => console.log(err))
或者添加一个容错逻辑,就是当页面的路由与跳转的路由不一致才允许跳转
$route 指的是当前的路由
$router 指的是整个路由实例
如下是我的路由嵌套规则
const routes = [ // 主路由 { path: '/', component: Main, redirect: '/home', // 子路由 children: [ { path: '/home', component: Home }, { path: '/user', component: User }, { path: '/mall', component: Mall }, { path: '/page1', component: PageOne }, { path: '/page2', component: PageTwo } ] } ]
添加判断逻辑
if (this.$route.path !== path && !(this.$route.path === '/home' && path === '/')) { this.$router.push(path) }
结语
深夜了,早点碎觉了,记录一下,继续努力哦。