H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

希望各位大神能帮忙解释下为什么用.stop无法实现预期效果,而.prevent可以。

回答:

我的理解
clipboard.png

本文地址:H5W3 » vue<router-link> 内嵌@click修饰符用stop还是prevent

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址