vue 实现动态路由的方法
很多时候我们在项目的路由都是在前端配置好的
但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染。不用在前端配置。
下面主要讲一下思路
1、和后台小哥哥沟通好数据,把我们前端配置的路由表数据给他,他就能看懂了
2、拿到数据需要我们自己再处理
路由中的component后台是给不了的,这里我们只需要后台小哥哥按照我们提供的前端component路径给数据,我们循环加载就可以了
//view就是后台给的数据 return () => import(`@/view/modules/${view}`);
这样我们就拿到了最重要的数据,即component。
3、把后台提供的数据处理成我们需要的路由表
4、添加到路由中
Router.addRoutes(路由数据)
以下讲一下我在项目中实现过程
1、新建一个router.js
里面做些基本的路由操作,比如导入包,因为我们拿到数据之后还是要自己手动去放到路由中去的
也会写一写不需要后台提供的菜单数据,比如我们测试页面或者login等等
import Vue from "vue"; import Router from "vue-router"; import AppMain from "@/view/modules/main/index"; Vue.use(Router); export const _CONSTANTS_ROUTERS = [ { path: "/login", component: () => import("@/view/modules/login/index"), hidden: true }, { path: "", component: AppMain, redirect: "/dashboard", children: [ { path: "/dashboard", component: () => import("@/view/modules/dashboard/index"), name: "Dashboard", meta: { title: "首页", icon: "dashboard", noCache: true } } ] } ]; export default new Router({ mode: "history", // 解决vue框架页面跳转有白色不可追踪色块的bug scrollBehavior: () => ({ x: 0, y: 0 }), // scrollBehavior: () => ({ y: 0 }), routes: _CONSTANTS_ROUTERS });
基本路由表已经建立好了
2、我们在什么时候进行获取完整的路由表数据
这个时候我们就要想到路由钩子函数,当然是Router.beforeEach中做
Router.beforeEach((to, from, next) => { NProgress.start(); if (!Token.isEmpty()) { if (to.path === "/login") { next({ path: "/" }); NProgress.done(); } else if (to.path === "/404") { next(); NProgress.done(); } else { // 判断当前用户是否已拉取完角色信息 if (Store.getters.roles.length === 0) { //拉取路由数据 ACLRepo.listMenuTreeOfCurrentUser().then(response => { Store.dispatch("generateRoutes", response).then(() => { // 根据roles权限生成可访问的路由表 Router.addRoutes(Store.getters.addRouters); // 动态添加可访问路由表 next({ ...to, replace: true }); // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }); }); } else { next(); } } } else { next(); } });
3、路由数据重新封装
generateRoutes
import { _CONSTANTS_ROUTERS } from "@/scripts/router"; import AppMain from "@/view/modules/main/index"; const _PERMISSION = { state: { routers: _CONSTANTS_ROUTERS, addRouters: [] }, mutations: { setRouters: (state, routers) => { state.addRouters = routers; //和已经存在的路由表拼接 state.routers = _CONSTANTS_ROUTERS.concat(routers); } }, actions: { generateRoutes({ commit }, response) { let asyncRouters = filterAsyncRouter(response); asyncRouters.push({ path: "*", redirect: "/404", hidden: true }); commit("setRouters", asyncRouters); } } }; function filterAsyncRouter(routers) { // 遍历后台传来的路由字符串,转换为组件对象 let accessedRouters = routers.filter(router => { if (router.meta) { // 默认图标处理 router.meta.icon = router.meta.icon ? router.meta.icon : "component"; } if (router.component === "main") { // Main组件特殊处理 router.component = AppMain; } else { //处理组件---重点 router.component = loadView(router.component); } //存在子集 if (router.children && router.children.length) { router.children = filterAsyncRouter(router.children); } return true; }); return accessedRouters; } function loadView(view) { // 路由懒加载 return () => import(`@/view/modules/${view}`); } export default _PERMISSION;
到这里其实就完成了,理清楚思路,其实很简单
以上就是vue 实现动态路由的方法的详细内容,更多关于vue 实现动态路由的资料请关注猪先飞其它相关文章!
相关文章
- ps动态环绕动画效果是现在很多人都非常喜欢的,大多数人还不知道ps动态环绕动画效果怎么制作下面文章就给大家介绍下ps怎么制作科技感十足的动态环绕动画效果,一起来看看...2017-07-06
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16