如何禁用 vuejs 路由器链接？

Question

我有一个使用 vue 创建的单页应用程序，导航链接都是使用 router-link 标签完成的。导航中有几个项目我的老板希望在导航中包含但已禁用，以便人们可以瞥见即将推出的一些功能。但是我不知道如何完全禁用路由器链接！

preventDefault 什么都不做， @click.native.prevent="stopClick()" 什么都不做（我试着把它发送到一个函数，看看是否会阻止点击，但它只是调用函数和路由，尽管有阻止），添加a disabled 类并设置 pointer-events: none; 的 css 规则什么都不做。我不确定还有什么可以尝试的，这是使禁用链接成为普通文本而不是路由器链接的唯一方法吗？

原文由 movac 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

解决方法是使用：

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

原文由 BTL 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用

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

原文由 Gabriel Berchmann 发布，翻译遵循 CC BY-SA 4.0 许可协议