在 Vue.js 的特定情况下禁用组件

Question

我在寻找方法，但在任何地方都找不到我的问题的答案。

让我解释一下，我有一个页面，我在其中加载了我创建的“日期选择器”组件。我将在路由器视图中加载的大多数组件中都需要它。我的问题是，如果可能，我会在路由器视图中加载特定组件时禁用它。

<main>
  <date-picker></date-picker>
  <router-view></router-view>
</main> 

除了将我的“日期选择器”组件嵌套在他们使用的组件中之外，还有其他解决方案吗？如果有帮助，我会使用 Vuex。

提前致谢。

Answer 1

一种方法是在要显示日期选择器的路线上设置元字段requiresDatePicker: true

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      meta: { requiresDatePicker: true }
    },
    {
      path: "/bar",
      component: Bar,
      meta: { requiresDatePicker: false }
    }
  ]
});

然后使用route 对象上的meta 属性来检查特定路由是否必须呈现日期选择器

<main>
  <date-picker v-if="$route.meta.requiresDatePicker"></date-picker>
  <router-view></router-view>
</main> 

感谢 @Konrad K 在 cmets 中提及

Answer 2

在您的 vuex 中，添加一个新状态。比方说，showDatePicker:

{
    state: {
        showDatePicker: false
    },
    mutation: {
        showDatePicker(state, show) {
            state.showDatePicker = show;
        }
    }
}

然后在你的组件中，添加一个计算属性来引用状态：

import { mapState } from 'vuex'
...
computed: {
    ...mapState(['showDatePicker'])
}

然后在日期选择器组件上添加一个条件：

 <date-picker v-if="showDatePicker"></date-picker>

然后在每个页面组件上的 mounted 回调中，您可以根据是否要显示日期选择器来切换值：

mounted() {

    //show
    this.$store.commit('showDatePicker', true);

    //hide
    this.$store.commit('showDatePicker', false);

}

Answer 3

最简单的方法是使用 window.location.href 并在那里检查您的路线。然后在你的组件上添加一个 v-if。像这样的：

<main>
  <date-picker v-if = "enableDatePicker"></date-picker>
  <router-view></router-view>
</main>

<script>
export default {
    computed: {
        enableDatePicker: {
              return (window.location.href === myroute)
         }
    }
}
</script>