vue动态路由的创建

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获取）；5.把登录成功需要跳转的menuList添加到$router中
• 其次，在router–》index.js组装相应router所需元素（component特别重要）；把组装的router放入总router中；在路由导航守卫中加载相应的menuList列表。1.组装相应router；2.相应router添加到总router中；3.路由导航守卫加载相应menuList列表。
• 最后，点击layout组件相应菜单组装相应router并添加到$router（ps：因项目而异本项目最左边只有三个固定菜单，若是动态菜单需遍历列表并组装相应router）。