vue.js - routing in nested components architecture

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.

I don't think each one should have a router view. Only the main part is where routing happens, the rest should only slightly adapt to the current page. — Lazar Ljubenović
– Lazar Ljubenović, Commented May 28, 2018 at 7:40
You're right about this, that is the general case. But lets say I want to insert a different menu into the sidebar or add a widget to the header based on the current route. Another case would be to drop the sidebar completely in another route thats why I want it to be a single component as well. How would I design an architecture like that? — pixelmusik
– pixelmusik, Commented May 28, 2018 at 7:45
I'd just use a couple of v-ifs if needed for the header/sidebar. I don't think multiple router views are supported in Vue yet: github.com/vuejs/vue-router/issues/213. Angular has something like that, though: angular.io/guide/… — Lazar Ljubenović
– Lazar Ljubenović, Commented May 28, 2018 at 9:29
I was hoping to find a solution without using if-else. Thanks, I will have a look at your links. — pixelmusik
– pixelmusik, Commented May 28, 2018 at 12:08

Kartik Puri · Accepted Answer · 2018-05-28 13:52:24Z

4

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

answered May 28, 2018 at 13:52

Kartik Puri

4673 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js - routing in nested components architecture

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related