一.vue动态路由的创建
- 首先,需要后端的配合通过login拿到router的path;然后再组装每一个路由所需要的元素;比如title、children、component、meta等,其中最重要的就是children、component,尤其是component的组装需要通过path指定到对应的.vue组件(item.component = () => import(’@/pages’ + item.path + ‘.vue’))。
1.外层菜单和layout全局样式;2.有二级菜单的VUE资源和HTML资源对应的文件路径;3.无二级菜单对应的文件路径;4.把登录成功后的菜单储存在本地浏览器(便于router–》index.js获取);
把登录成功需要跳转的menuList添加到$router中
- 其次,在router–》index.js组装相应router所需元素(component特别重要);把组装的router放入总router中;在路由导航守卫中加载相应的menuList列表。
- 1.组装相应router;
2.相应router添加到总router中;
3.路由导航守卫加载相应menuList列表。
最后,点击layout组件相应菜单组装相应router并添加到$router(ps:因项目而异本项目最左边只有三个固定菜单,若是动态菜单需遍历列表并组装相应router)。