时间戳

首页 > 解决方案 > 使用 Vue 路由器的动态导航？

vue.js - 使用 Vue 路由器的动态导航？

问题描述

我想设置我的 Vue 应用程序以使用线性导航结构来安排我将通过iFrame提供的最终 html 文档。

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

我目前能够使用这种结构实现的方法是为School创建一个组件，一个用于SQL，一个用于Python，并具有用于导航的列表渲染卡。您可以看到，如果我将来扩展，这将变得乏味。

我想改进结构，让一个 Cards 组件动态生成路线和导航卡以及从VuexStore 提供的数据。

工作演示

标签： vue.jsvuejs2router

解决方案

您可以随时注入额外的路由，您不必预先声明。

您可以使用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

推荐阅读