router-link 上绑定点击事件，不是路由失效就是点击抢道的问题

Question

在使用 watch 来侦测路由变化时，来显示不同的标题，代码和课程中的差不多：

<router-link to="/foo" @click.native="centerClick('foo')">Go to Foo</router-link>
<router-link to="/bar" @click.native="centerClick('bar')">Go to Bar</router-link>

const centerTitle = Vue.ref('')
// 点击链接切换
const centerClick = (item: string) => {
    centerTitle.value = item
}
Vue.watch(centerTitle, () => {
    document.title = centerTitle.value
})

添加了点击后，路由失效了。在点击事件上添加了 native 时没有阻止链接跳转，路由也无效，使用 prevent 是可以阻止点击事件，点击有效，但路由还是无效。

请问题各位老师和同学，需要如何解决？

非常感谢！

Answer 1

张轩 2020-11-09 16:37:51

.native 修饰符已经deprecated，也就是说已经被废除了。可以看这个问答。https://github.com/vuejs/vue-router/issues/800

现在可以使用子标签的形式，把事件绑定在子标签上面。

<router-link to="/signup"><span @click="test">The Link </span></router-link>

• 提问者 萨龙龙 #1

  张老师，完美解决，我谷歌很久没有找到答案，非常感谢您！

Answer 2

张轩 2020-11-08 17:57:09

同学你好 请问你最终要什么样的效果 是先修改页面的 title，然后再跳转链接 是吗？

• 提问者 萨龙龙 #1

  张老师您好，我是想点击按钮时实现路由效果，再修改下网页标题，应该是同时进行，不跳转链接。
  
  您看是如何实现好？ 谢谢