Как правильно организовать vue-router, в случае когда один router-view используется внутри другого router-view?

Question

[godyesnow]

Добрый день, есть несколько типов страниц:
1.

2.

3.

router-view отвечает за переход между этими типами страниц (красным выделил динамические области), но проблема в том что в 3 типе страниц структура чуть сложнее, а именно при переходе по навигации (зеленая) должен меняться контент в красной области, а при переходе по навигации (синяя) должен меняться контент в желтой области. Таким образом получается что router-view будет находиться внутри основного router-view и нужно будет создавать второй объект router? Возможно это делается совсем иначе и я пошел не в правильном направлении? Как правильно реализовать подобную структуру навигации в проекте?

Comments

[Михаил]

обычный children

[alex]

опция children в записи маршрута

Answer 1

[Alex Pospeliri]

В Router.js ты прописываешь роуты, и определяешь по каким роутам какие компоненты будут грузиться.
например в твоем случае.
path: '/ - соответствует компоненту (странице) main (Main.vue)
path: '/about - соответствует странице about (About.vue)
path: '/news - соответствует странице news (News.vue) -3я страница

И дальше большое кол-во как это можно сделать, зависит от задачи и макета .
1. через роуты скажем выбрав что-то в меню внутри блока ты попадешь на определенную 'новость'
path: '/news/:id'
2. или у тебя будет приходит с сервера список 'новостей', ты их будешь фильтровать
в computed и в зависимости от того что выберет пользователь показывать.
...

P.S. Накидай базовый шаблончик со страницами и статическими данными, будет не понятно, скинь посмотрим поправим ;)

Comments

[godyesnow]

Попробую накидать полный вариант, может по ходу что-то прояснится, спасибо большое за ответ и направление!

Answer 2

[Андрей Андреев]

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

Comments

[godyesnow]

Спасибо, на основе этой статьи я как раз сделал так, что у каждого компонента (страницы) есть meta свойство wrapper вывожу это таким образом:

<component :is="wrapper">
        <router-view></router-view>
    </component>

По сути component это тип страницы, а конкретная страница это router-view (красные области) Но не совсем понимаю как внутри этого router-view мне отобразить еще один router-view, так как там есть своя навигация (3-ий тип страниц)?

[Андрей Андреев]

godyesnow, ну а в чем проблема это "боковое меню" засунуть в этот враппер?