在 App 组件中检查路由的状态

Question

我正在做我的水疗应用。我完成了用户界面，现在我需要做管理部分。 app.vue 是我应用程序的主要组件。 app.vue 负责站点的模板布局。 但是管理面板需要另一个模板，我希望 app.vue 也是它的入口点。我找到的解决方案对我来说似乎很糟糕：

<div v-if="$route.path.indexOf('admin') !== -1">
     ...
</div>
<div v-else>
    ...
</div>

你有什么建议？

Answer 1

这实际上取决于您的布局有多少不同。

• 您可以使用更强大（和复杂）的系统，如 vue-enterprise-boilerplate where each view (sample) chooses its own layout (sample)
• 您可以在 App.vue 模板中使用 Vue 的 dynamic component（参见下面的示例）
• 如果布局非常相似，你只需要不同的导航（例如），你可以使用 Vue-router 的 Named Views

---

1. 将布局模板提取到自己的组件中（与 vue-enterprise-boilerplate 示例非常相似）
2. 为管理员创建具有布局的组件
3. 在 App.vue 中使用以下模板：

<template>
  <component :is="getLayoutComponent()">
    <router-view />
  </component>
</template>
<script>
export default {
  computed: {
    getLayoutComponent() {
      // ...logic to choose different layout component base on path
    }
  }
}
</script>