如何禁用vuejs路由器链路?

2022-03-28 00:00:00 javascript vue.js vue-router routerlink

我有一个使用VUE创建的单页面应用程序,并且导航链接都是使用router-link标记完成的。我的老板希望在导航中包含几个项目,但将其禁用,这样人们就可以一窥即将到来的一些功能。但是,我想不出如何完全禁用路由器链路!

preventDefault什么都不做,@click.native.prevent="stopClick()"什么也不做(我尝试将其发送到一个函数以查看这是否会阻止单击,但它只是调用该函数并进行路由,尽管存在阻止),添加disabled类并设置pointer-events: none;的css规则什么也不做。我不确定还可以尝试什么,唯一的办法是使禁用的链接成为普通文本而不是路由器链接吗?


解决方案

目前仍没有本机解决方案。但在VUE路由器Repo上有一个开放的PR:https://github.com/vuejs/vue-router/pull/2098。

解决方法是使用:

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

相关文章