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菜单重复点击路由报错原因分析(解决方法)
基础教程推荐
猜你喜欢
- html+css实现图片扫描仪特效 2024-01-19
- 深入理解React Native核心原理(React Native的桥接(Bridge) 2024-02-07
- 创建图片对比slider滑块示例详解 2024-04-26
- 绝对定位元素的水平垂直居中的方法(3种任选) 2023-12-23
- Django框架利用ajax实现批量导入数据功能 2022-12-15
- 在线FLV播放器实现方法 2024-01-06
- javascript瀑布流布局实现方法详解 2023-12-23
- css a:hover下的span样式无效的解决方法 2024-01-22
- Ajax请求WebService跨域问题的解决方案 2024-04-15
- vue+webpack 更换主题N种方案优劣分析 2024-01-22