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

【问题标题】：Checking the state of the route in the App component在 App 组件中检查路由的状态
【发布时间】：2019-11-23 17:17:50
【问题描述】：

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

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

你有什么建议？

【问题讨论】：

最好将用户和管理部分与其他应用分开。

标签： vue.js vuejs2 single-page-application vue-router

【解决方案1】：

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

您可以使用更强大（和复杂）的系统，如 vue-enterprise-boilerplate，其中每个视图 (sample) 选择自己的布局 (sample)
您可以在App.vue 模板中使用Vue 的dynamic component（参见下面的示例）
如果布局非常相似并且您只需要不同的导航（例如），您可以使用 Vue-router 的Named Views

将布局模板提取到自己的组件中（与vue-enterprise-boilerplate 示例非常相似）
为管理员创建带有布局的组件
在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>

【讨论】：