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

Question

项目用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可以。

Answer 1