Навигация в стиле Google Inbox с помощью vue-router

Question

Я создаю приложение с vue-router и пытаюсь добиться пользовательского интерфейса, похожего на (ныне несуществующий) Входящие Google . Или Techcrunch домашняя страница, которая, возможно, лучше отражает то, что мне нужно.

• есть список предметов
• при нажатии на один из этих элементов он «расширяется на месте», чтобы отобразить дополнительные сведения.
• URL-адрес также обновляется для отображения расширенного элемента
• при нажатии кнопки «назад» элемент сворачивается обратно в список
• при прямом доступе к URL на странице должен отображаться развернутый элемент, и (необязательно) может отображаться больше элементов списка ниже.

Дело в том, что я не могу понять, как бы это построить - я пытаюсь начать с идеи дочерних маршрутов, но я не знаю, куда поместить ребенка <router-view>, так как его местоположение всегда будет быть динамическим в зависимости от того, какой элемент был просто нажат для расширения.

У меня есть догадка, это связано с именованными представлениями , но я не могу обернуть голову вокруг него.

Любые идеи приветствуются!

Answer 1

Подобная тема поднималась на странице Vue github некоторое время назад, но касалась открытия модов, а не открытия сворачивающихся контейнеров.Один из участников этой темы написал довольно хорошее сообщение в блоге , которое может указать вам на решение.

После того, как вы отсортируете динамическую маршрутизацию, как это было сделано выше для модалов, поменяйте местами рекламный роликДля статьи и анимации расширение должно быть достаточно простым.В кулинарной книге Vue docs есть хорошая статья о создании динамического блога, который также должен пригодиться.