[vue]怎么使a的href不跳转

Question

怎么在a标签里，使用href，但是在click的时候不跳转到href里，就是怎么拦截跳转的操作，执行click里的事件

<a :href="url"
           @click.stop.self="click">{{value}}</a>


data(){
  return {
    url: "http://www.baidu.com",
    value: "baidu"
  };
},
methods: {
    click(e) {
        this.$emit("click", {
            title: this.value,
            url: this.url,
        });
        e.stopPropagation();
        return false;
    }
}

期望结果是没有跳转到baidu.com上，而是执行this.$emit("click")

Answer 1

preventDefault

Answer 2

既然你不想跳转那么为什么要a标签，href中url没有任何意义。
如果开始就不要这个跳转功能的话，要不你尝试pointer-events: none;
个人建议为了语义化和维护性，建议不要使用带有具体功能语义的标签，有时候会触发很多意想不到的效果，就比如你这个代码，在不同的机型中，显示的效果是不一样的。有的跳转优先，有的点击事件优先，这个权重问题我们应该尽量避免。

Answer 3

methods: {

//...
prevent(event){
    event.preventDefault()
    // do something you want
}

}

Answer 4

a标签禁止跳转执行点击事件
a标签的href怎样写，才能避免路由跳转？

Answer 5

    <a href="http://www.baidu.com" onClick="test02()">点击弹框，右键跳转</a>
    <script>
      function test02 (ev) {
        ev = ev || window.event;
        window.event? window.event.returnValue = false : ev.preventDefault();
        console.log('被点击了')
      }
    </script>

Answer 6

href="javascript:;"

Answer 7

亲测有效: https://stackoverflow.com/que...

<a
                :title="item.name"
                :href="getDocPath(item)"
                @click.prevent.stop="onClick(item, 'click')"
                

和

<el-link
                :title="item.name"
                :href="getDocPath(item)"
                @click.native.prevent.stop="onClick(item, 'click')"