在 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 }
    }
  ]
});

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

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

感谢@Konrad K在评论中提及