How to properly organize vue-router when one router-view is used inside another router-view?

Question

Vue.js

Good afternoon, there are several types of pages:
1.

2.

3.

router-view is responsible for the transition between these types of pages (highlighted the dynamic areas in red), but the problem is that in the 3rd type of pages the structure is a little more complicated, namely when switching to navigation (green) the content in the red area should change, and the navigation (blue) should change the content in the yellow area. So it turns out that the router-view will be inside the main router-view and it will be necessary to create a second router object? Perhaps this is done in a completely different way and I went in the wrong direction? How to properly implement a similar navigation structure in a project?

Answer 1

In Router.js, you write routes, and determine which routes will load which components.
for example in your case.
path: '/ - corresponds to the component (page) main (Main.vue)
path: '/about - corresponds to the page about (About.vue)
path: '/news - corresponds to the page news (News.vue) -3rd page
And further big how this can be done depends on the task and the layout.
1. through routes, say, by selecting something in the menu inside the block, you will be taken to a certain 'news'
path: '/news/:id'
2. or you will have a list of 'news' coming from the server, you will filter them
in computed and depending on what the user chooses to show.
...
PS Throw in a basic template with pages and static data, it won't be clear, let's see if we can fix it ;)

Answer 2

https://itnext.io/anyway-heres-how-to-create-a-mul...