如何禁用vuejs路由器链接？

Question

我有一个使用vue创建的单页应用程序，导航链接都是使用路由器链接标记完成的。导航中有几个项目我的老板想在导航中使用，但禁用了，这样人们就可以看到一些即将推出的功能。然而，我不知道如何完全禁用路由器链接！

preventDefault不执行任何操作，@click.native.prevent=“stopClick（）”不执行任何操作（我尝试将其发送到一个函数，看看这是否会阻止单击，但它只是调用函数并路由，尽管存在阻止），添加一个禁用的类并设置指针事件的css规则：无 什么也不做。我不知道还有什么可以尝试的，唯一的办法是让禁用的链接变成普通文本而不是路由器链接吗？




Answer 1

我不认为有一个合适的解决方案，因为路由器链接没有禁用属性，但一个技巧是使用标签="按钮"，以便添加所需的属性如下：

<router-link 
     to="/link"
     tag="button"
     :disabled="true"
>
  Link
</router-link>

Answer 2

你可以用

<router-link 
  :is="isDisabled ? 'span' : 'router-link'"
  to="/link"
>
  /link
</router-link>

Answer 3

今天仍然没有本地解决方案。但是在vue路由器回购中有一个公开的PR：https://github.com/vuejs/vue-router/pull/2098.

解决方法是使用：

<router-link 
  :disabled="!whateverActivatesThisLink" 
  :event="whateverActivatesThisLink ? 'click' : ''"
  to="/link"
>
  /link
</router-link>