Dynamic components and child routes

vue-router

#1

Hey,

I’m building a web app that has 2 different kinds of layout:

Route /: landing page

Route /:id: first layout with content link 1 content

Route /:id/content-two: second layout with content link 2 content

From my understanding a good way of doing that is dynamic components that I implemented like taught in this blog post: https://markus.oberlehner.net/blog/dynamic-vue-layout-components/ and it worked well to build new pages based on the layouts and have my left menu show up easily without copy pasting code between pages.

Problem:

Now I wanted to add the /:id/content-two route to my routes.js and if I visited that route I didn’t see my “Content Link 2” there, only the “Content Link 1” from the “parent” route (/:id). I looked at https://stackoverflow.com/questions/48111573/in-vue-js-how-to-use-multiple-router-views-one-of-which-is-inside-another-compon and saw that I need another <router-view> for my child view somehow?

What I’m confused about is how vue-router and dynamic components work together. Is it one or the other or can they be combined?

Thanks!

Code:

My code currently looks mostly like the one from the tutorial: https://github.com/maoberlehner/dynamic-vue-layout-components/tree/master/src but with a child route in my routes.js file like:

        {
            path: '/:id',
            component: User,
            children: [
                { path: 'content-two', component: ContentTwo, name: 'contentwo' }, 
              ]
        } 

Layout:

+---------------------------------+          +---------------------------------+            +-----------------------------------+
|                                 |          |---------------------------------|            | +-------------------------------+ |
|                                 |          ||                               ||            | |                               | |
|                                 |          ||          Header               ||            | |           Header              | |
|      Landing page               |          ||                               ||            | |                               | |
|                                 |          +---------------------------------+            | +-------------------------------+ |
|                                 |          |                                 |            |                                   |
|                                 |          +---------+ +-------------------+ |            |            +-------------------+  |
|                                 |          ||        | |                   | |            | +-------+  |                   |  |
|                                 |          || Link 1 | |   Content Link 1  | |            | |       |  |   Content Link 2  |  |
|                                 |  +---->  ||        | |                   | |            | | Link 1|  |                   |  |
|                                 |          ||        | |                   | |            | |       |  |                   |  |
|                                 |          || Link 2 | |                   | |            | |       |  |                   |  |
|                                 |          ||        | |                   | |            | | Link 2|  |                   |  |
|                                 |          ||        | |                   | |            | |       |  |                   |  |
|                                 |          ||        | |                   | |            | |       |  |                   |  |
|                                 |          ||        | |                   | |            | |       |  |                   |  |
|                                 |          +---------+ +-------------------+ |            | |       |  |                   |  |
|                                 |          |                                 |            | +-------+  +-------------------+  |
|                                 |          +---------------------------------+            | +-------------------------------+ |
|                                 |          ||         Footer                ||            | |         Footer                | |
|                                 |          |---------------------------------|            | +-------------------------------+ |
+---------------------------------+          +---------------------------------+            +-----------------------------------+