如何禁用 vuejs 路由器链接？

Question

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

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

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>

Answer 2

我认为这个问题没有合适的解决方案，因为路由器链接没有该disabled属性，但可以使用一个技巧tag="button"来添加所需的属性，如下所示：

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

Answer 3

方法一：阻止点击事件

诀窍是在捕获阶段处理事件并阻止其向上传播。

<router-link 
  to="/path"
  @click.native.capture.stop
>
  Go to page
</router-link>

或者强制：

<router-link 
  to="/path"
  @click.native.capture="handleClick"
>
  Go to page
</router-link>

function handleClick(event) {
  if (passesSomeCheck) event.stopPropagation();
}

如果您想从 Vue Router 获取解析路径以在没有 SPA 导航的情况下强制页面加载，这可能非常有用。

function handleClick(event) {
  if (loadWithoutSpa) {
    event.stopPropagation();
    window.location.href = event.currentTarget.href;
  };
}

方法2：将默认事件更改为空字符串

<router-link 
  to="/path"
  event
>
  Go to page
</router-link>

方法 3：使用<a>标签

<a :href="$router.resolve(route).href">
  Go to page
</a>

to其中路线可以与您传递给prop 的内容完全相同router-link。

Answer 4

没有内置任何东西，而且可能永远不会。也就是说，对我有用的是使用 CSS。

<router-link to="/my-route" :class="{ disabled: someBoolean }" />

<router-link to="/my-route" :class="{ disabled: someBoolean }" />

不透明度使它看起来被禁用，并且pointer-events: none;使它不需要处理:hover样式或设置cursor样式。

Answer 5

您可以使用

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

Answer 6

只要设置好to=""，链接就不会去任何地方。