如何禁用 vuejs router-link？

Question

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

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

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 元素的事件属性（并且您可以使用本机点击来执行其他操作）：

<router-link 
:event="clickable ? 'click' : ''" 
@click.native="!clickable ? doOtherThing : ''" > Link </router-link>

Answer 4

可以设置路由守卫per-route

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
    } 
})

更多信息： https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

Answer 5

没有内置任何东西，probably won't ever be。也就是说，对我有用的是使用 CSS.

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

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

不透明度使它看起来被禁用，pointer-events: none; 使它看起来如此，因此您不需要同时处理 :hover 样式或设置 cursor 样式。

Answer 6

您可以使用

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

Answer 7

只需设置 to="" 然后 link 不会去任何地方。

Answer 8

方法一：阻止点击事件

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

<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>

路由可以与您在 router-link 上传递给 to 道具的内容完全相同。

Answer 9

路由器 v4 更新：

使用 boolean 变量 status 来确定 link 是否处于活动状态并将 link (ctalink) 作为变量传递为嗯。

在这里偶然发现了 nuxt-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>

来源：https://next.router.vuejs.org/api/#router-link-s-v-slot

Answer 10

NuxtLink（Vue 路由器 v4）

对我来说，最有效的是下面的代码。这是我在 nuxt 和 tailwind.

应用程序中使用的真实代码

              <nuxt-link
                v-slot="{ navigate }"
                :to="`lesson/${lesson.lesson_id}`"
                append
                custom
              >
                <button
                  class="focus:outline-none"
                  :class="{
                    'text-gray-500 cursor-default': !lesson.released,
                  }"
                  :disabled="!lesson.released"
                  @click="navigate"
                >
                  {{ lesson.title }}
                </button>
              </nuxt-link>

Answer 11

你可以试试：

  <router-link
   :event="whateverActivatesThisLink ? 'click' : ''"
  >
  Go to page
  </router-link>

或者使用 computed:

编写更简洁的代码

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

computed: {
  handleWhatEverEvent() {
    return this.whateverActivatesThisLink ? 'click' : '';
  }
}

Answer 12

使用 div 元素或 span 元素代替结合@click事件

<div @click="handleRouteNavigation">
your content..
</div>

在脚本方法中定义

handleRouteNavigation(){

  if(conditionSatisfied){
      this.$router.push('/mylink')
   }

}

Answer 13

因为我必须使用 <router-link> 和自定义属性（并向路由添加自定义元数据），所以我可以这样解决它：

<router-link :to="route.path"
                  custom
                  v-slot="{href, route, navigate, isActive, isExactActive}">
                <a v-bind="$attrs"
                :href="href"
                @click="checkClick($event, navigate, route.meta)">
                ...
                <slot></slot>
            </a>
</router-link>

然后函数

checkClick(event: any, navigate: any, meta: { enabled: boolean }) {
            if (meta.enabled) {
                navigate(event);
                return;
            }
            event.preventDefault();
        },

Answer 14

不知道为什么没有人尝试像这样替换 to 道具：

<router-link :to="disabled ? '' : '/link'">
  Link
</router-link>

但它 100% 可以与任何版本的 Vue 和 vue-router 一起使用。另一个答案不适用于 Vue 3 和 vue-router 4

如何禁用 vuejs router-link？

How to disable a vuejs router-link?

javascript

vue.js

vue-router

routerlink

方法一：阻止点击事件

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

方法 3：使用 `<a>` 标签

路由器 v4 更新：

NuxtLink（Vue 路由器 v4）

如何禁用 vuejs router-link？

How to disable a vuejs router-link?

javascript

vue.js

vue-router

routerlink

方法一：阻止点击事件

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

方法 3：使用 <a> 标签

路由器 v4 更新：

NuxtLink（Vue 路由器 v4）

方法 3：使用 `<a>` 标签