位置: IT常识 - 正文

vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由(vue 动态添加路由)

编辑:rootadmin
vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由 addRoute路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路:动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由静态路由和动态路由的优缺点1、中大型项目,采用的都是动态路由方式,因为后台导航目录运营人员可能会新增菜单,新增菜单后,前端人员得在路由表手动填加上,这样导航才能点击才能对应上页面,这样比较麻烦。2、如果是动态路由,运营人员新增目录后,因为我是动态路由获取永远是最新的路径,一次性通过动态填加的方式加进去,后边就不用管路由的事了,只关心页面就可以了,也是对权限管理的一种方法。动态路由实现思路:在全局路由守卫中,先判断token值有没有。有的话先看是否存储过,如果存储过直接,页面调用渲染,如果没有,就请求接口,把路由表存储下,除非没有token,跳转登录页面路由表里-把那些常规路由(不需要权限的路由,事先都写到路由表里)。把需要权限的路由通过router.addRoute()动态填加到对应的子路由里 。动态填加的路由需要处理下。因为后端传给你的是树状结构,一般前端需要把树结构处理成列表结构(通过递归,不断的获取路径,名字那些信息),填加到路由表里。(我没写 )动态路由遇到的问题与解决方式登录后路由表里在次加载一遍动态路由-解决第1次页面点击找不到路径问题,因为路由是动态生成的,登录后路由没有被在次生成,路由表里是空的。所以在路由里要在次生成一遍也有可能是因为你的路由表里有通配路由,你的书写位置也不是入口文件处,可能就是404页面。登录后跳转其它页面,如果刷新,页面找不到问题?原因是路由是动态的,它是在登录后生成的,而其它页面没有在次生成动态路由,所以就找不到。解决办法:可在路由里,在生成一遍动态路由。这样不管在后台哪个页面,一刷新都会先执行。(路由先走)具体方法是在入口文件当中,通过全局前置路由守卫获取router路由(考虑到在main.js中这个文件比较繁琐),新文件重新导入 动态添加子路由

推荐整理分享vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由(vue 动态添加路由),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue动态路由加载组件,vue 动态添加路由,vue 动态添加路由,vue动态路由添加 没生效,vue动态路由添加重复问题,vue动态路由添加重复问题,vue动态路由添加 没生效,vue动态路由添加 没生效,内容如对您有帮助,希望把文章链接给更多的朋友!

vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由(vue 动态添加路由)

获取主路由的一个子数组信息。

router.beforeEach((to,from,next)=>{ console.log(router);/* 路由对象 */ console.log(router.options.routes);/* 前端路由实例对象数组(根组) */ console.log(router.options.routes[0]);/* 需要在里面动态添加子路由的一个根组,插入的也是这个根组对象 */ console.log(router.options.routes[0].children);/* 获取这个根组下的子路由数组 *//*纯粹的一次添加路由,其实通过服务器根据权限获取路由信息*/ if(router.options.routes[0].children.length == 4 && to.path!="/login"){ router.options.routes[0].children.unshift({path:"test",component:()=>import("@/views/test.vue")}) router.addRoute(router.options.routes[0]); next({ path: to.path, // 动态添加一个新的路由 replace: true // 重定向,为了让刚刚添加的路由规则生效 }); }else{ next(); } })

也可以写成:

let newT = router.options.routes[0];/* 需要在里面动态添加子路由的一个根组,插入的也是这个根组对象 */if (newT.children.length == 4 && to.path != "/login") {//条件保护,防止全局路由守卫死循环执行。 newT.children.unshift({ path: "test", component: () => import("@/views/test.vue") }) //给子路由添加一条数据 router.addRoute(newT); next({ path: to.path, replace: true });} else { next()}

可以看的出来:addRoute 添加一条新的路由记录是一个对象 router.addRoute({});同时这个路由作为现有路由的子路由,如果路由有一个name,或者地址一样,就会删除之前的路由信息,重新加进去这个路由。或者已经有一个与之名字相同的路由,它会先删除之前的路由; 注意:新添加的路由并不会触发新的导航 需要:

next({ path: to.path, // 动态添加一个新的路由 replace: true // 重定向,为了让刚刚添加的路由规则生效});

vue-router的addRoute方法实现权限控制 getRoutes()方法是获取这个这个路由数据的数组实例,来实现一个条件控制。

router.beforeEach((to,from,next)=>{ if(router.getRoutes().length==3 && to.path === "/admin"){ router.addRoute({path:"/admin",name:"admin",component:()=>import(/*webpackChunkName: "admin"*/"@/views/Admin.vue")}) next({ path: to.path, replace: true }); } next();})
本文链接地址:https://www.jiuchutong.com/zhishi/294592.html 转载请保留说明!

上一篇:VUE设置和清除定时器(vue清空页面数据)

下一篇:Vue3 —— 使用Vite配置环境变量(vue3 + ts)

  • 支付国外佣金代扣代缴增值税
  • 全额纳税是什么意思
  • 建筑业老项目如何界定
  • 电子税务局怎么导出企业所得税报表
  • 保证金可以挪用吗
  • 会计账簿账目核对要求包括哪些
  • 出售无形资产净收益是收入吗
  • 酒店怎么合理规划管理
  • 为安装设备所发生的差旅费入什么科目
  • 找贴现公司贴现有风险吗
  • 技术研发费用计入什么科目
  • 分配利润顺序
  • 年薪制有什么好处
  • 工业用地厂房要交契税吗
  • 不征税的政府补助如何开票
  • 收到劳务外包发票计入什么科目
  • 待摊费用属于什么费用
  • 哪些人需缴纳个人所得税
  • 退休人员再就业受伤算工伤吗
  • 电梯维保公司缴税标准
  • 王者荣耀进不去怎么回事最新
  • php preg_quote
  • linux获取操作命令的使用方法
  • 核定征收的企业怎么交所得税
  • 对外支付需要缴纳增值税吗
  • 公允价值变动损益借贷方向增减
  • 什么情况下计提信用减值损失
  • 存货的期末计价方法是遵循哪个信息质量原则
  • 增值税专用发票上注明的价款含税吗
  • 建筑工程房屋租赁费属于什么费用
  • 大数据可视化前端界面模板
  • yolov5怎么改进
  • php加密zend
  • php中实现文件上传需要用到哪几个函数
  • 页面访问升级出错怎么办
  • 确认收入需要哪些资料
  • 快递行业规矩
  • didstata命令
  • 增值税留抵税额计入什么科目
  • 城市维护建设税是什么意思
  • 4s店收到红字发票怎么办
  • mongodb subtract
  • 收入和成本的原则是什么
  • 确认收入时还没交税
  • 汽车租赁费怎么赋码
  • 公司的财产保险业务
  • 购入原材料要交印花税吗
  • 工资薪金可以抵扣增值税吗
  • 施工企业老板名字
  • 企业所得税研发费用加计扣除例题
  • 捐赠固定资产怎么入账
  • 清算所得税计税基础
  • 老板买私人飞机可以避税吗
  • 员工个人负担的社保要交工会经费怎
  • 供应合同转让协议
  • 私人贴现做账
  • 暂估收入怎么做分录
  • 利润表增加,资产负债表减少怎么回事
  • 公司增资有什么作用
  • 小企业应该如何发展
  • sqlserver清空所有表数据
  • win8.1怎么重新装系统
  • 游戏与操作系统不兼容
  • window7qq登录失败
  • win8安装ie8
  • 如何在苹果电脑上下载软件
  • linux搭建l2tp服务器
  • windows xp 开机
  • xp系统无法正常启动怎么办
  • win10周年版
  • ie8怎么设置默认ie7模式
  • win8.1启动设置
  • win7系统电脑开机黑屏
  • css实现遮罩层
  • js数组用法
  • 国家税务总局纳税服务司罗名
  • 第一次去税务局领发票
  • 个人经营所得申报时间
  • 外地户口在绍兴读小学
  • 越南入关要给小费吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设