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

Question

我寻找如何做到这一点，但我没有在任何地方找到问题的答案。

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

<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 在评论中的提及