vuejs菜单重复点击路由报错原因是因为在this.$router.push的时候没有添加成功或失败的回调。
方法一:在路由router文件中新增以下判断
const router = new VueRouter({
routes: []
})
// 解决重复点击报错bug
const VueRouterPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err);
}
export default router;
方法二:路由跳转时先判断路由是否重复跳转
handleClickMenu(menu) {
if(this.$route.path !== menu.url){
this.$router.push({path: menu.url});
}
}
方法三:利用catch方法捕获router.push异常
handleClickMenu(menu) {
if(this.$route.path !== menu.url){
this.$router.push({path: menu.url});
}
}
以上是编程学习网小编为您介绍的“vuejs菜单重复点击路由报错原因分析(解决方法)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:vuejs菜单重复点击路由报错原因分析(解决方法)
基础教程推荐
猜你喜欢
- layui Table 设置title 字体加粗 2022-10-18
- CSS实现ul和li横向排列的两种方法 2023-12-09
- JS如何通过FileReader获取.txt文件内容 2023-08-08
- layui.form is not a function 2022-10-21
- Ajax解决多余刷新的两种方法(总结) 2023-01-31
- js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍 2023-12-27
- 《javascript少儿编程》location术语总结 2023-12-13
- 「HTML+CSS」--自定义加载动画【024】 2023-10-26
- ThinkPHP表单数据智能写入create方法实例分析 2024-03-08
- vue html中调用方法遇到的坑 2023-10-26
