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

Question

我寻找了解决方法，但没有找到解决我的问题的方法。

让我解释一下，我的页面加载了我创建的组件 'date-picker'。我将在路由器视图中加载的大多数组件中都需要它。我的问题是，如果可能的话，我会在路由器视图中加载特定组件时禁用它。

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

除了将我的 'date-picker' 组件嵌套在他们使用的组件中之外，还有其他解决方案吗？如果有帮助，我会使用 Vuex。

提前致谢。

Answer 1

最简单的方法是使用 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>

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

一种方法是在要显示日期选择器的路线上设置元字段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 在评论中提到

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

Disable a component in a specific case in Vue.js

javascript

vue.js

vue-router

vuex

vuejs2