项目用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事件要阻止默认行为再执行。