Vue.js中的条件<router-link>取决于prop值？

Question

希望这是一个相当简单的问题/答案,但我在文档中找不到太多信息.

有没有办法<router-link>根据是否传入道具来启用或禁用生成的锚？

<router-link class="Card__link" :to="{ name: 'Property', params: { id: id }}">
  <h1 class="Card__title">{{ title }}</h1>
  <p class="Card__description">{{ description }}</p>
</router-link>

如果没有id传递给该组件,我想禁用正在生成的任何链接.

有没有办法在不将内容加倍的情况下做到这一点v-if？

谢谢!

Answer 1

假设您要禁用锚标记,因为无法点击并且看起来已禁用,该选项正在使用CSS.isActive应该通过检查prop id返回true.

<router-link class="Card__link" v-bind:class="{ disabled: isActive }" :to="{ name: 'Property', params: { id: id }}">
  <h1 class="Card__title">{{ title }}</h1>
  <p class="Card__description">{{ description }}</p>
</router-link>

<style>
 .disabled {
    pointer-events:none; 
    opacity:0.6;        
 }
<style>

如果您只想禁用导航,可以使用路线保护.

beforeEnter: (to, from, next) => {
            next(false);
 }

Answer 2

问题是router-link呈现为html锚标记，而锚标记不支持该disabled属性。但是，您可以添加tag="button"到router-link：

<router-link :to="myLink" tag="button" :disabled="isDisabled" >

然后 Vue 会将您的链接呈现为一个按钮，这自然支持该disabled属性。问题解决了！缺点是您必须提供额外的样式以使其看起来像一个链接。然而，这是实现此功能的最佳方式，并且不依赖于任何pointer-eventshack。

Answer 3

如果您需要经常使用它，请考虑：

创建新组件

<template>
  <router-link
    v-if="!disabled"
    v-bind="$attrs"
  >
    <slot/>
  </router-link>

  <span
    v-else
    v-bind="$attrs"
  >
    <slot/>
  </span>
</template>

<script>
export default {
  name: 'optional-router-link',

  props: {
    params: Object,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

可选，全局注册：

Vue.component('optional-router-link', OptionalRouterLink);

使用方法如下：

<optional-router-link
  :disabled="isDisabled"
  :to="whatever"
>
    My link
</optional-router-link>

Answer 4

我有时会做这样的事情：

<component
    :is="hasSubLinks ? 'button' : 'router-link'"
    :to="hasSubLinks ? undefined : href"
    :some-prop="computedValue"
    @click="hasSubLinks ? handleClick() : navigate"
>
    <!-- arbitrary markup -->
</component>

...

computed: {
    computedValue() {
        if (this.hasSubLinks) return 'something';
        if (this.day === 'Friday') return 'tgif';
        return 'its-fine';
    },
},

但我基本上总是包装路由器链接，这样你就可以控制禁用状态，或者在渲染链接之前预先检查任何状态或道具，如下所示：

<template>
    <router-link
        v-slot="{ href, route, navigate, isActive, isExactActive }"
        :to="to"
    >
        <a
            :class="['nav-link-white', {
                'nav-link-white-active': isActive,
                'opacity-50': isDisabled,
            }]"
            :href="isDisabled ? undefined : href"
            @click="handler => handleClick(handler, navigate)"
        >
            <slot></slot>
        </a>

    </router-link>
</template>

<script>
export default {
    name: 'top-nav-link',

    props: {
        isDisabled: {
            type: Boolean,
            required: false,
            default: () => false,
        },

        to: {
            type: Object,
            required: true,
        },
    },

    data() {
        return {};
    },

    computed: {},

    methods: {
        handleClick(handler, navigate) {
            if (this.isDisabled) return undefined;
            return navigate(handler);
        },
    },

};
</script>

现在在我的应用程序中，我注意到一些组合@click="handler => handleClick(handler, navigate)"性能受到显着影响。

例如，这改变路线非常慢：

@click="isDisabled ? undefined : handler => navigate(handler)"

但上面的完整示例代码中的模式可以工作并且没有性能问题。

一般来说，三元运算符 in@click可能非常危险，所以如果遇到问题，不要立即放弃，尝试多种不同的方法来对谓词进行分叉或<component :is=""根据状态进行切换。导航本身是一个棘手的问题，因为它需要隐式的第一个参数才能工作。

我没有尝试过，但你应该能够使用诸如Function.prototype.call()、Function.prototype.apply()或 之类的东西Function.prototype.bind()。

例如，您也许可以执行以下操作：

@click="handler => setupNavigationTarget(handler, navigate)"

...

setupNavigationTarget(handler, cb) {
    if (this.isDisabled) return undefined;
    return this.$root.$emit('some-event', cb.bind(this, handler));
},

...

// another component
mounted() {
    this.$root.$on('some-event', (navigate) => {
        if (['Saturday', 'Sunday'].includes(currentDayOfTheWeek)) {
            // halt the navigation event
            return undefined;
        }

        // otherwise continue (and notice how downstream logic
        // no longer has to care about the bound handler object)
        return navigate();
    });
},