vue.js - 嵌套組件體系結構中的路由

Question

我使用vue.js設計一個管理應用程序，我正在嘗試盡可能模塊化構建UI架構。 所以我在單個文件組件中設置並包裝了Header ， Body ， Sidebar和Main ，如下所示。

樹

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

圖形

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

現在，每個組件都有自己的路由器視圖，以根據當前路由顯示動態內容。 當我在vue.js中只有一個路由器視圖時，我怎樣才能實現這一點？ 是不是可能通過路由視圖組件完全解決這些動態組件而不重寫類似於php Smarty的原始內容，像這樣？

aboutus.vue

<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中的這種路由體系結構的正確方法。

Answer 1

我已經嘗試實現類似於此的東西，其中我有單獨的組件文件夾，在其下我有views文件夾。 所以我在index.js中導入了組件。 看看下面的例子，我已經導入了管理員組件，我已經添加了它的子項。 同樣，您可以將多個子項添加到不同的組件，這些子項將僅加載到其父組件中。

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

看一下這個主題結構https://github.com/misterGF/CoPilot