- 上篇讲到：我们对接了获取用户信息
getInfo接口，也简单学了一下怎么使用pinia，回头我们专门来设计一堂课从0来学习下怎么使用pinia、敬请期待～
- 那么这节课，我们来学习下，怎么实现动态路由吧。
-
课前说明，之前vue2基于vue-admin-element模版来开发权限管理、动态路由需求时，分为，前端主导和后端主导两种形式。
- 后端主导就是后端存储vue路由表信息，通过接口返回给前端动态渲染路由，对应的前端页面会有一个菜单管理的页面，来对路由进行增删改查。
- 前端主导就是前端将所有路由都写在router.js文件内，通过后端返回的权限标识，动态匹配展示某些路由。
- 那么在
Geeker-Admin这个开发模版中，我们直接采用前端主导即可，也就是路由信息全部在前端写死，然后通过后端返回的权限标识，来动态匹配，动态渲染对应的路由即可。
- 具体怎么做呢？
- 第一步：先来琢磨一下，目前页面中的两个路由页面，是怎么渲染出来？我们先来找捋一下执行逻辑。
image.png
- 可以很清晰的看到，在执行完登录接口后，直接就调用了
initDynamicRouter添加动态路由方法，那我们就点进去这个方法看逻辑
image.png
- 又可以很清晰的看到，调用了
pinia中的 getAuthMenuList方法，继续顺藤摸瓜
- 摸到最后，就可以看到是请求的return出来的本地json文件，
authMenuList.json
- 最后使用
pinia的getters，可以理解为克隆，copy出来了一份，flatMenuListGet
// 菜单权限列表 ==> 扁平化之后的一维数组菜单，主要用来添加动态路由
flatMenuListGet: state => getFlatMenuList(state.authMenuList),
- 继续看
initDynamicRouter方法，主要改造一丢丢第3点
// 3.添加动态路由
authStore.flatMenuListGet.forEach(item => {
item.children && delete item.children;
if (item.component && typeof item.component == "string") {
item.component = modules["/src/views" + item.component + ".vue"];
}
if (item.meta.isFull) {
router.addRoute(item as unknown as RouteRecordRaw);
} else {
router.addRoute("layout", item as unknown as RouteRecordRaw);
}
});
网友评论