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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章