登录后我们拿到路由动态路由，后端传的数据可能为这个

{path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },name: 'index',component: index},//用印中心
                {path: '/chapterCenter',redirect: {name: 'applicationChapter'},meta: {title: '用印中心',icon: 'icon-shuazi',status: 0, //0展示1不展示tab_index: 1, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },name: 'chapterCenter',component: chapterCenter,children: [{path: '/applicationChapter',name: 'applicationChapter',meta: {title: '申请用章',icon: 'icon-ico_zhongyaofangguanli_caigoushenqingdanshenhe',status: 0, //0展示1不展示tab_index: 1, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },component: applicationChapter}, {path: '/approvalProcessing',name: 'approvalProcessing',meta: {title: '审批处理',icon: 'icon-yinzhang',status: 0, //0展示1不展示tab_index: 1, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },component: approvalProcessing}, {path: '/authorizationManagement',name: 'authorizationManagement',meta: {title: '授权管理',icon: 'icon-shouquan',status: 0, //0展示1不展示tab_index: 1, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },component: authorizationManagement}, {path: '/auditProcessing',name: 'auditProcessing',meta: {title: '审计处理',icon: '',status: 0, //0展示1不展示tab_index: 1, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },component: auditProcessing}, {path: '/usageRecord',name: 'usageRecord',meta: {title: '使用记录',icon: 'icon-number1',status: 0, //0展示1不展示tab_index: 1, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },component: usageRecord}, {path: '/myApplication',name: 'myApplication',meta: {title: '我的申请',icon: 'icon-wodeshenqing-moren',status: 0, //0展示1不展示tab_index: 1, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },component: myApplication},]},//系统管理
                {path: '/systemManagement',name: 'systemManagement',redirect: {name: 'sealManagement'},meta: {title: '系统管理',icon: 'el-icon-setting',status: 0, //0展示1不展示tab_index: 2, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },component: systemManagement,children: [{path: '/sealManagement',name: 'sealManagement',meta: {title: '印章管理',icon: 'icon-yinzhang',status: 0, //0展示1不展示tab_index: 2, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },component: sealManagement}, {path: '/sealDetail',name: 'sealDetail',meta: {title: '印章详情',icon: '',status: 0, //0展示1不展示tab_index: 2, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },component: sealDetail}, {path: '/staffManagement',meta: {title: '员工管理',icon: 'icon-quanxianguanli',status: 0, //0展示1不展示tab_index: 2, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },name: 'staffManagement',component: staffManagement}, {path: '/reportManagement',meta: {title: '报表管理',icon: 'icon-baobiaoguanli',status: 0, //0展示1不展示tab_index: 2, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },name: 'reportManagement',component: reportManagement}, {path: '/processManagement',meta: {title: '流程管理',icon: 'icon-liucheng',status: 0, //0展示1不展示tab_index: 2, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },name: 'processManagement',component: processManagement}, {path: '/privilegeManagement',meta: {title: '权限管理',icon: 'icon-erji-quanxianguanli',status: 0, //0展示1不展示tab_index: 2, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },name: 'privilegeManagement',component: privilegeManagement}, ]},//数据统计
                {path: '/dataStatistics',meta: {title: '数据统计',icon: 'icon-icon-',status: 0, //判断当前标签展不展示0展示1不展示tab_index: 3, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },name: 'dataStatistics',component: dataStatistics,children: []},//平台管理
                {path: '/platformManagement',redirect: {name: 'companyManagement'},meta: {title: '平台管理',icon: 'icon-pingtaiguanli',status: 0, //0展示1不展示tab_index: 4, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },name: 'platformManagement',component: platformManagement,children: [{path: '/companyManagement',meta: {title: '公司管理',icon: 'icon-gongsiguanli',status: 0, //0展示1不展示tab_index: 4, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },name: 'companyManagement',component: companyManagement}, {path: '/accountManagement',meta: {title: '账号管理',icon: 'icon-zhanghaoguanli',status: 0, //0展示1不展示tab_index: 4, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },name: 'accountManagement',component: accountManagement}, {path: '/sealMigration',meta: {title: '印章迁移',icon: 'icon-erji-suoyouqianyi',status: 0, //0展示1不展示tab_index: 4, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },name: 'sealMigration',component: sealMigration},]}

这个时候我们通常有一个固定路由，这些页面是不需要后台动态获取的，如登录页，错误页面，如下

//固定的路由const routes = [{path: '/login',name: 'login',meta: {key: 1,title: '登录',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: login}, {path: '/register',name: 'register',meta: {key: 1,title: '注册',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: register}, {path: '/forgetPassword',name: 'forgetPassword',meta: {key: 1,title: '忘记密码',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: forgetPassword}, {path: '/error',name: 'error',meta: {key: 1,title: '页面不存在',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: error},{path: '/',name: 'home',redirect: {name: 'index'},meta: {title: '首页',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: home,children: [//我们后台获取到的路由放在这里
            ],}]

我们把后台获取到的放入上面数组里，之后有个问题就是，后台传给我们的

是字符串，他无法替代

所以我们要用map对后台数据做映射所以我在router文件里新建一个router.js

const login = () => import('@/views/login/index')
const register = () => import('@/views/register/register')
const forgetPassword = () => import('@/views/forgetPassword/forgetPassword')
const error = () => import('@/views/error')
const home = () => import('@/views/home/index')
const index = () => import('@/views/home/index/index')var map = new Map()
map.set("login", () => import('@/views/login/index'))
map.set("register", () => import('@/views/register/register'))//注册
map.set("forgetPassword", () => import('@/views/forgetPassword/forgetPassword'))//忘记密码
map.set("error", () => import('@/views/error'))
map.set("home", () => import('@/views/home/index'))
map.set("index", () => import('@/views/home/index/index'))
//系统管理
map.set("systemManagement", () => import('@/views/home/systemManagement/systemManagement'))
map.set("sealManagement", () => import('@/views/home/systemManagement/sealManagement/sealManagement')) //印章管理
map.set("sealDetail", () => import('@/views/home/systemManagement/sealDetail/sealDetail')) //印章详情
map.set("staffManagement", () => import('@/views/home/systemManagement/staffManagement/staffManagement')) //员工管理
map.set("processManagement", () => import('@/views/home/systemManagement/processManagement/processManagement')) //流程管理
map.set("reportManagement", () => import('@/views/home/systemManagement/reportManagement/reportManagement')) //报表管理
map.set("privilegeManagement", () => import('@/views/home/systemManagement/privilegeManagement/privilegeManagement')) //权限管理
//数据统计
map.set("dataStatistics", () => import('@/views/home/dataStatistics/dataStatistics'))
//用印中心
map.set("chapterCenter", () => import('@/views/home/chapterCenter/chapterCenter'))
map.set("applicationChapter", () => import('@/views/home/chapterCenter/applicationChapter/applicationChapter')) //申请用章
map.set("approvalProcessing", () => import('@/views/home/chapterCenter/approvalProcessing/approvalProcessing')) //审批处理
map.set("authorizationManagement", () => import('@/views/home/chapterCenter/authorizationManagement/authorizationManagement')) //授权管理
map.set("auditProcessing", () => import('@/views/home/chapterCenter/auditProcessing/auditProcessing')) //审计处理
map.set("usageRecord", () => import('@/views/home/chapterCenter/usageRecord/usageRecord')) //使用记录
map.set("myApplication", () => import('@/views/home/chapterCenter/myApplication/myApplication')) //我的申请
//平台管理
map.set("platformManagement", () => import('@/views/home/platformManagement/platformManagement'))
map.set("companyManagement", () => import('@/views/home/platformManagement/companyManagement/companyManagement')) //公司管理
map.set("accountManagement", () => import('@/views/home/platformManagement/accountManagement/accountManagement')) //账号管理
map.set("sealMigration", () => import('@/views/home/platformManagement/sealMigration/sealMigration')) //印章迁移//获取动态路由方法
function getRouterList(successCallback){//登录之后获取动态路由let userRouter = ''let role_router=''role_router=localStorage.getItem('role_router')userRouter = JSON.parse(role_router).childrendigui(userRouter)function digui(userRouter = []) {userRouter.forEach(function(item, index) {if (item.children != null && item.children.length > 0) {digui(item.children)}item.component = map.get(item.component)//通过映射找到我们定义好的组件
        })}//固定的路由const routes = [{path: '/login',name: 'login',meta: {key: 1,title: '登录',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: login}, {path: '/register',name: 'register',meta: {key: 1,title: '注册',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: register}, {path: '/forgetPassword',name: 'forgetPassword',meta: {key: 1,title: '忘记密码',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: forgetPassword}, {path: '/error',name: 'error',meta: {key: 1,title: '页面不存在',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: error},{path: '/',name: 'home',redirect: {name: 'index'},meta: {title: '首页',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },component: home,children: [//我们后台获取到的路由放在这里
            ],}]//把筛选的路由添加进去name: 'home',的childrenroutes[4].children=userRouterconsole.log('3333333',routes)successCallback(routes)
}export default {getRouterList
}

把我创建的方法暴露出去

而我们router文件下了index.js里放我们固定的路由表如下

import Vue from 'vue'
import Router from 'vue-router'const login = () => import('@/views/login/index')
const register = () => import('@/views/register/register')
const forgetPassword = () => import('@/views/forgetPassword/forgetPassword')
const error = () => import('@/views/error')
const home = () => import('@/views/home/index')
const index = () => import('@/views/home/index/index')Vue.use(Router)//固定的路由
const routes = [{path: '/login',name: 'login',meta: {key: 1,title: '登录',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },component: login},{path: '/register',name: 'register',meta: {key: 1,title: '注册',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },component: register},{path: '/forgetPassword',name: 'forgetPassword',meta: {key: 1,title: '忘记密码',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },component: forgetPassword},{path: '/error',name: 'error',meta: {key: 1,title: '页面不存在',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },component: error},{path: '/',name: 'home',redirect: {name: 'index'},meta: {title: '首页',requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },component: home,children: [{path: '/index',meta: {title: '首页',icon: '',tab_index: 0, //给头部导航获取的requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                },name: 'index',component: index},],}
]
const router =new Router({routes,
})
export default router

下面是我们如何动态添加路由了在main.js里全局引入刚刚创建的router.js

后面是使用添加动态路由在mian.js里加入以下代码

//防止刷新当前页面时动态路由还没挂在vue上出现空白页面，在挂载之前router.addRoutes(routerlist)
if(localStorage.getItem('role_router')){let routerlist=[]　　//这里是调用router.js里的方法拿到动态路由Vue.prototype.ROUTER.getRouterList(function(data){routerlist=data})　　//动态添加路由router.addRoutes(routerlist)
}
// 路由拦截器
router.beforeEach((to, from, next) => {console.log(to)if(localStorage.getItem('role_router')){if (to.meta.requireAuth==true) {next();}else {Vue.prototype.$message({message: '您没有权限进入'+to.meta.title+'页面,请联系系统管理员',type: 'warning'});next({path:from.fullPath,//待在此页面
            });}}else{localStorage.setItem('role_router',0)Vue.prototype.$message({message: '您没有登录请登录',type: 'warning'});next({path:'/login',//待在此页面
        });}})

转载于:https://www.cnblogs.com/lizhao123/p/10308985.html

vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）相关推荐

  1. 动态添加路由 addRoute添加路由刷新404

    文章目录 动态添加路由 案例 初步 动态添加路由-使用导航守卫 解决刷新404问题 完整代码: 动态添加路由 大概简而言之,就是需要路由是可以按照项目需求进行配置添加的,而不是一开始就配置好的. 就好 ...

  2. 【网络】route和 IP route的区别|route 和 IP route 添加路由

    目录 route和 IP route的区别 route 和 IP route 显示路由 route 和 IP route 添加路由 route 添加路由 IP route 添加路由 添加的路由持久化 ...

  3. bond添加路由_实验：路由、bonding、team

    实验:路由实验 路由表构成 目标网络:网络ID 子网掩码 接口:到达目标网络,从哪个接口出来,此接口 网关:gateway,下一个邻近路由器的邻近接口的IP地址,如果目标网络和本路由器直接,网关的地址 ...

  4. activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏

    这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...

  5. vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别

    问题产生前言 使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果 比如对于网站 ...

  6. 【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由

    文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

  7. Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)，其实就是路由在后台配置 前端请求接口后 生成路由表

    最近刚结束一个项目,然后再客户的百般刁难下又增加了项目新需求: 后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由) vue项目实现动态路由的方式大体可分为两种: 1.第一种就是 ...

  8. vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式

    工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...

  9. vue动态添加路由之避坑指南

    你是否遇到了: addRouter后出现白屏 路由守卫出现死循环 踩了很多坑之后,我终于悟到了vue动态添加路由的正确打开方式: 为了设计权限,在前端我们通常采取两种方式 1.在用户登录时获取该用户权 ...

最新文章

  1. python实现logistic_用Python实现机器学习算法—Logistic 回归算法
  2. js base_64 解密
  3. MySQL数据库：常见经典SQL语句
  4. 2.关于QT中数据库操作，简单数据库连接操作，数据库的增删改查，QSqlTableModel和QTableView，事务操作，关于QItemDelegate 代理
  5. Spring中AbstractCommandController控制器
  6. lnmp1.7安装环境后mysql无法启动的解决
  7. ubuntu下用命令行安装Qt
  8. [pytorch、学习] - 5.4 池化层
  9. Abstract Factory（抽象工厂）--对象创建模式
  10. git push 和 pull 时 免密执行的方法
  11. SQL--合计函数（Aggregate functions）:avg,count,first,last,max,min,sum
  12. 【LOJ119】单源最短路 模板
  13. Hibernate 泛型实现 dao 层的基类
  14. 《软件测试》学习目标与计划
  15. 涉密计算机涉密存储设备或者改作其他用途的,将未经安全技术处理的退出使用的涉密计算机涉密存储设备或者改作其他用途的依法给予处分...
  16. Designing Data-Intensive Applications翻译
  17. 百度地图level对应距离（比例尺级别对应的多少米）
  18. “云钉一体”战略解读：阿里打通了数字化的“罗马引水桥”
  19. VB利用多张PNG图片制作动画
  20. 戰女神V、ef_latter、BaldrSky 注册表补丁

热门文章

  1. 毕业设计-基于微信小程序的移动端轻量 GIS 系统
  2. zeppelin源码分析(1)——编译、调试和maven modules分析
  3. 别再问自己适不适合做软件测试了
  4. 国际金融——我国服务贸易逆差的成因及对策研究
  5. 特殊分布律篇2——指数分布
  6. Magic Leap开发指南（3）-- 将你的Cube投递给其他用户
  7. 【linux】nfs挂载错误wrong fs type, bad option, bad superblock
  8. C语言——池塘夜降彩色雨
  9. dede列表命名规则
  10. 罗尔定理构造辅助函数的方法