工作示例：

Question

我似乎找不到一种基于数据变量禁用nuxt链接的好方法。有人可以建议吗？我尝试过查看文档，但是我什么都没想。

说我有一个名为disable的布尔值，我想做这样的事情

<nuxt-link :disabled="disable"></nuxt-link>

如果布尔值设置为false，我基本上只是不希望链接可点击

Answer 1

另一种方法，这是我最想要的。是将标记更改为button并使用本机:disabled状态。

<nuxt-link tag="button" :disabled="disable" to="/some/location">Some location</nuxt-link>

然后借助样式将按钮变成链接。

Answer 2

<nuxt-link> is essentially <router-link> of Vue Router。

您可以使用event prop禁用它。

假设您的data或computed属性之一是disabled布尔值：

<nuxt-link :event="disabled ? '' : 'click'"></nuxt-link>

工作示例：

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  data(){
    return { disabled: true }
  }
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- Assume they are <nuxt-link> because they are the same -->
    <router-link
      :event="disabled ? '' : 'click'"
      to="/foo"
    >
      Go to Foo
    </router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

Answer 3

我发现最简单的方法是为禁用的链接创建一个类。我仍然不确定这是否是最好的方法，但是它对我有用，并且确实满足我的要求。

<nuxt-link to="/search" :class="!disabled ? 'disabled' : ''"> Search </nuxt-link>

我的CSS

.disabled {
  color: lightgrey
  pointer-events: none
}

Answer 4

在 Vue Router 4 中，router-link 不再支持 tag 和 event 属性。 Here您可以获得更多信息。

我将复制上面链接中的示例：

replace
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
with
<router-link to="/about" custom v-slot="{ navigate }">
  <span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
</router-link>

我会举一个真实的用法例子。我在实际项目中使用的这段代码，使用了 nuxt 和 tailwind。

<nuxt-link
  v-slot="{ navigate }"
  class="flex-grow font-ember"
  :to="`lesson/${l.lesson_id}`"
  append
  custom
>
  <button
    class="flex items-center"
    :class="{
      'text-gray-400 cursor-not-allowed': !l.released,
      'text-gray-900': l.released,
    }"
    :disabled="!l.released"
    @click="navigate"
  >
    ...
  </button>
</nuxt-link>

Answer 5

如果您只想禁用 nuxt-link，只需添加 event 属性

<nuxt-link event="">Go to Foo</nuxt-link>

停用基于布尔值的nuxt链接

5 个答案:

工作示例：