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

Question

I use vue.js to design an administration app and I'm trying to build the UI architecture as modular as possible. So I have set up and wrapped the Header , Body , Sidebar and Main in single file components as can be seen below.

Tree

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

Graphical

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

Now each of these components has it's own router view to display dynamic content depending on the current route. How can I achieve this when I only have one single router-view available in vue.js? Isn't it somehow possible to address these dynamic components altogether through the routed view component without overriding the original content similar to php Smarty, like this?

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>

But that would be impossible due to the nested architecture I guess? I can't find a proper way to get into this routing architecture in vue.js with nested components.

Answer 1

I have tried achieving something similar to this, in which I have the separate component folder under which I have views folder. so I imported the component in my index.js. have a look at below example, I have imported admin component under which I have added its children. Similarly, you can add multiple children to the different component and these children will load in their parent component only.

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

Take a look at this theme structure https://github.com/misterGF/CoPilot