Javascript vue.js-嵌套组件体系结构中的路由

我使用vue.js设计了一个管理应用程序，并尝试尽可能模块化地构建UI体系结构。因此，我将

标题

、

正文

、

侧栏

和

主

设置并包装在单个文件组件中，如下所示

树

App
- Header
  - dynamic content
- Body
  - Sidebar
    - dynamic content
  - Main
    - dynamic content

<template>
    <div>
        <header>
            <header-content>
                About us - Header
            </header-content>
        </header>
        <sidebar>
            <sidebar-content>
                About us - Sidebar
            </sidebar-content>
        </sidebar>
        <main>
            <main-content>
                About us - Main
            </main-content>
        </main>
    </div>
</template>

<script>
    /* ... */
</script>

图形化

┌──────────────────────────────────────────────────────────┐
│ HEADER                              SOME DYNAMIC CONTENT │
├──────────────────────────────────────────────────────────┤
│ BODY                                                     │
│┌──────────┬─────────────────────────────────────────────┐│
││ SIDEBAR  │ MAIN                                        ││
││          │                                             ││
││ SOME     │ SOME DYNAMIC CONTENT                        ││
││ DYNAMIC  │                                             ││
││ CONTENT  │                                             ││
││          │                                             ││
│└──────────┴─────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────┘

现在，每个组件都有自己的路由器视图，根据当前路由显示动态内容。当vue.js中只有一个路由器视图可用时，如何实现这一点？难道不可能通过路由视图组件完全解决这些动态组件，而不覆盖与php Smarty类似的原始内容吗

aboutus.vue

App
- Header
  - dynamic content
- Body
  - Sidebar
    - dynamic content
  - Main
    - dynamic content

<template>
    <div>
        <header>
            <header-content>
                About us - Header
            </header-content>
        </header>
        <sidebar>
            <sidebar-content>
                About us - Sidebar
            </sidebar-content>
        </sidebar>
        <main>
            <main-content>
                About us - Main
            </main-content>
        </main>
    </div>
</template>

<script>
    /* ... */
</script>

关于我们-标题
关于我们-侧边栏
关于我们-梅因
/* ... */

---

但我想这是不可能的，因为嵌套的架构？在vue.js中，我找不到合适的方法使用嵌套组件进入这种路由体系结构。

我尝试过实现类似的功能，在其中我有一个单独的组件文件夹，在该文件夹下我有视图文件夹。 因此，我在index.js中导入了该组件。看看下面的例子，我已经导入了管理组件，在该组件下我添加了它的子组件。类似地，您可以将多个子组件添加到不同的组件中，这些子组件将仅加载到其父组件中

{
 path: '/admin',
      component: AdminComponent,
      children: [
        {
          path: 'admin_dashboard',
          alias: '',
          component: AdminDashboard,
          name: 'admin_dashboard'
        },

---

看看这个主题结构

我不认为每个主题都应该有一个路由器视图。只有主要部分是路由发生的地方，其余部分应该只稍微适应当前页面。但是假设我想在侧边栏中插入一个不同的菜单，或者根据当前路径在标题中添加一个小部件。另一种情况是将侧边栏完全放在另一条路径上，这就是为什么我希望它也是一个单独的组件。我该如何设计这样的体系结构呢？如果需要，我会在标题栏/边栏中使用几个

v-if

s。我认为Vue中还不支持多个路由器视图：。Angular有点像这样：我希望在不使用if-else的情况下找到一个解决方案。谢谢，我会看看你的链接。