ElementUI：navmenu导航中，开启vue-router 的模式后，点击触发事件而不进行路由跳转

大雁f

 关注

阅读 38

2022-03-12


需求：在点击导航菜单栏的时候，有的菜单需要进行跳转，有的则不需要进行跳转

解决方案：借助​​路由守卫​​进行判断

代码

设置前置路由守卫

ElementUI：navmenu导航中，开启vue-router 的模式后，点击触发事件而不进行路由跳转_Vue

如果路径中包含​​userManageAside-​​则不进行跳转，其余情况直接进行路由跳转

同时，给item绑定点击事件

ElementUI：navmenu导航中，开启vue-router 的模式后，点击触发事件而不进行路由跳转_ElementUI_02

此时，点击导航栏只会触发点击事件，而不会进行跳转了



相关推荐

Vue路由「十五」-- vue-router的路由模式***

boomwu 80 0 0

Vue2.x 核心基础（ vue-router路由,vue-router 的基本使用,vue-router 的常见用法,动态路由匹配,声明式导航 & 编程式导航,导航守卫）

夏天的枫_ 36 0 0

Vue-router路由跳转的两种方式

爱读书的歌者 114 0 0

vue-router的三要素详解：路由map 、路由视图、路由导航

柠檬果然酸 90 0 0

Vue-router 中hash模式和history模式的区别

ZMXQQ233 36 0 0

vue-router学习一：什么是路由，路由分类，路由安装，路由使用，路由默认路径，history模式，默认的linkActiveClass属性，路由代码跳转

夏天的枫_ 96 0 0

Vue中如何获取三级联动相应级数的数据并进行路由跳转

未定义变量 59 0 0

Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套（子路由）、路由传递数据、导航守卫）

耶也夜 52 0 0

elementUI中，table表格，点击行内的按钮，触发了行点击事件，防止冒泡的解决方案

彩虹_bd07 66 0 0

vue-router学习二：动态路由（路由传递数据的一种方式），路由懒加载，嵌套路由，路由传递参数方式，导航守卫，keep-alive标签

月白色的大狒 100 0 0

精彩评论（0）

0 0 举报