首页 > 编程知识 正文

定义vue动态路由,vue动态路由实现方式

时间:2023-05-06 20:55:12 阅读:272569 作者:1065

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)。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。