Динамическая навигация с использованием Vue Router?

Question

Я хочу настроить мое приложение Vue на использование структуры линейной навигации для упорядочения окончательных HTML-документов, которые я буду обслуживать через iFrame .

.
├── School
│   ├── SQL
|   |   ├── SQL Basics
|   |   ├── SQL Intermediate
|   |   ├── SQL Advanced
|   |   └── ...
│   ├── Python
|   |   ├── Python Basics
|   |   ├── Python Data Structures
|   |   ├── Python Classes
|   |   ├── Python Advanced
|   |   └── ...
|   └──...   
└── ...

Текущий способ, которого я смог достичь с помощью этой структуры, - это создать Компонент для Школа , один для SQL и один для Python и иметь Список карт рендеринга для навигации. Вы можете видеть, что это станет утомительным, если я буду расширяться в будущем.

Я хочу улучшить структуру, чтобы иметь только один компонент Cards, динамически генерирующий маршрут, а также карты навигации и данные, поступающие из Vuex Store.

Рабочая демоверсия

Answer 1

Вы можете ввести дополнительные маршруты в любое время, вам не нужно объявлять заранее.

Вы можете использовать router.addRoutes , чтобы вы могли выполнять итерации своего объекта контента и генерировать маршруты в приложении beforeMount или beforeCreate , где вы будете делать это. $ router.addRoutes (...) .

https://vuejs.org/v2/api/#beforeMount

https://vuejs.org/v2/api/#beforeCreate

https://router.vuejs.org/api/#router-addroutes