Vue a标签跳转前添加判断是否跳转

虽然Vue跳转使用的Vue router完成页面切换，但是必不可免的会遇到使用a标签跳转网上找了很多方法没有适合自己的。下面mark一下

通常使用 href=”javascript: viod(0)”，并在onclick中填写跳转JS，可是可以，但是这就隐藏了鼠标hover的地址和光标改变。这并不是我们想要的。

onclick=”return function()”可以通过判断function返回值来阻止或允许a标签的跳转，并且也保存了href的地址。很遗憾在Vue中的@click=”function()”并不支持return function()的写法，故不可使用。

这里我们使用取消默认事件preventDefault()的方法来实现@click后不进行跳转，给函数传入$event就可以访问到原生事件了。

<a href="https://jinwenjie.me" @click="judgeJump('message here', $event)">
  Submit
</a>

// ...
methods: {
  judgeJump: function (message, event) {
    // 现在我们可以使用访问原生事件对象
    if (this.judge) {
      event.preventDefault()
      alert(message)
    }
  }
}

还没完，Vue可是尽量远离Dom操作的优秀框架，如果我们不需要判断逻辑而是单纯的取消默认事件，你可以这样写

<a @click.prevent="doThat"></a>

看起来好多了，不是吗？