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菜单重复点击路由报错原因分析(解决方法)


猜你喜欢
- vue websocket 发送消息 2023-10-08
- DIV+CSS 清除浮动常用方法总结 2024-02-07
- PHP Ajax实现表格实时编辑 2023-02-01
- 从基础开始建立一个JS代码库第2/2页 2024-02-24
- vue3中的ref()详解 2023-07-09
- Ajax 的初步实现(使用vscode+node.js+express框架) 2023-02-23
- JS原生手写轮播图效果 2024-02-26
- 基于JavaScript实现 获取鼠标点击位置坐标的方法 2023-12-01
- 浏览器加载、渲染和解析过程黑箱简析 2023-12-25
- 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例 2023-01-20