Javascript 如何禁用vuejs路由器链接？

我有一个使用vue创建的单页应用程序，导航链接都是使用

路由器链接

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

---

preventDefault

不执行任何操作，

@click.native.prevent=“stopClick（）”

不执行任何操作（我尝试将其发送到一个函数，看看这是否会阻止单击，但它只是调用函数并路由，尽管存在阻止），添加一个

禁用的
类并设置
指针事件的css规则：无什么也不做。我不知道还有什么可以尝试的，唯一的办法是让禁用的链接变成普通文本而不是路由器链接吗
 目前仍然没有本机解决方案。但是在vue路由器repo上有一个开放的PR:

解决方法是使用：

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


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

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


链接
要防止单击，您可以像这样直接访问路由器链接元素的事件属性（您可以使用本机单击执行其他操作）：

链接
您可以为每条路线设置路线防护

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        //here you can set if condition 
        if (conditionTrue) {
          //redirect to other route
          next({path: '/bar'});
        } else {
          next();
        }
      }          
    }
  ]
})

或者，您可以全局设置

routes: [
  {path: '/foo', component: Foo, meta:{conditionalRoute: true}}
]; 

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.conditionalRoute)) { 
        // this route requires condition/permission to be accessed
        if (!checkCondition ) { 
            //check condition is false
            next({ path: '/'});
        } else { 
            //check condition is true
            next();
        } 
    } else { 
        next(); // Don't forget next
    } 
})

有关更多信息：
没有内置的，而且。也就是说，对我来说最有效的是使用CSS

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

不透明度使其看起来被禁用，
指针事件：无
使您无需同时处理
：悬停
样式，或设置
光标
样式。
您可以使用

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


/链接
只要将
设置为=“”
，链接就不会出现在任何地方。
方法1：防止单击事件
诀窍是在捕获阶段处理事件并阻止它向上传播


转到第页

或强制性地：


转到第页

函数handleClick（事件）{
if（passesSomeCheck）事件。stopPropagation（）；
}

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

函数handleClick（事件）{
如果（装载时不带PA）{
event.stopPropagation（）；
window.location.href=event.currentTarget.href；
};
}

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

转到第页

方法3：使用


其中路由可以与您传递到
路由器链接上的
to
道具的路径完全相同
路由器v4的更新：
使用
boolean
变量
status
确定链接是否处于活动状态，并将链接（
ctalink
）作为变量传递

由于
numxt-link
实现因更新而中断，所以从经验来看，这同样有效

    <router-link
      v-slot="{ navigate }"
      :to="ctalink"
      custom
    >
      <div @click="status ? navigate(ctalink) : null">
        <div :class="status ? 'text-green' : 'text-gray'"> 
          Click me when active 
        </div>
      </div>
    </router-link>


激活时单击我

来源：
这是因为
路由器链接
呈现为html锚定标记，并且
也不支持禁用的属性。添加
tag=“button”
将使routerlink呈现为按钮，因此该按钮自然可用于
：禁用的
。在Vue Router v4中已弃用
    <router-link
      v-slot="{ navigate }"
      :to="ctalink"
      custom
    >
      <div @click="status ? navigate(ctalink) : null">
        <div :class="status ? 'text-green' : 'text-gray'"> 
          Click me when active 
        </div>
      </div>
    </router-link>