vuejs2 - 禁用基于 bool 值的nuxt链接

Question

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

说我有一个名为disable的 bool 值，我想做这样的事情
<nuxt-link :disabled="disable"></nuxt-link>
如果 bool 值设置为false，我基本上只是不希望链接可点击

Answer 1

<nuxt-link> is essentially <router-link> of Vue Router。
您可以使用 event prop禁用它。
假设您的data或computed属性之一是disabled bool 值:

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

工作示例:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/baz', component: Baz }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  data(){
    return { disabled: true }
  }
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.min.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>
    <router-link to="/baz">Go to Baz</router-link>
  </p>
  <router-view></router-view>
</div>