当前位置: 首页 > 工具软件 > Click Router > 使用案例 >

vue「router-link」 内嵌@click修饰符用stop还是prevent

岳正浩
2023-12-01

项目用vue搭建,通过vue-router路由,在一个导航条内

<router-link>
    ...
    <span @click.stop.prevent="navTo('...')">点我路由另一个地址</span>
    ...
</router-link>

实现目标:点<router-link>内的其他元素都能按照router配置路由,点击<span>元素触发click事件而不按照router路由。

实际现象:
我自己的理解:<router-link>会转化成 a 标签,那在内部的click事件要阻止向上冒泡应该用.stop修饰,但实际效果是用了stop页面跳转两次,最终跳转到<router-link>配置的地址。如果用.prevent则只触发内部的click事件,而不会跳转到<router-link>页面,反向推导解释:<router-link>内部所有子元素都属于转化后的a标签的一部分,默认行为跳转到router配置的地址,新增click事件要阻止默认行为再执行。

 类似资料: