位置: 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)

  • 核定税种可以在哪里申报
  • 弥补亏损用税前还是税前
  • 税控盘是干什么用的
  • 法人购买车险发票怎么开
  • 发票校验码被章盖住了
  • 地价计入房产原值公式
  • 个体户4年不注销的后果消
  • 青年企业家协会入会要求
  • 如何从对公账户的资金情况来确定案件,发现犯罪嫌疑人?
  • 私募合伙企业收到投资款后退回,支付利息的会计处理
  • 资产负债表上预付账款和预收账款区别
  • 可供出售权益工具投资公允价值的增加
  • 二手房怎么避免一房多卖
  • 工会经费拨缴是什么意思
  • 企业安全生产费用提取标准 最新
  • 受托方的计税价格是什么意思
  • 以旧换新的会计处理规定
  • 税控设备全额抵扣政策
  • 开完红字发票后,正数发票如何开具?
  • 抵押担保查询
  • 按折现率计算现值
  • 增值税发票已作废怎么办
  • 海关完税价格表
  • 筹建期装修费用计入什么科目
  • 扩大税收来源什么意思
  • 没有购销合同怎么申报印花税
  • 银行定期存款转存
  • 股票的交易费用是怎么算的
  • linux系统如何更改主机名
  • 个人股权转让应税凭证名称
  • 小企业会计准则和一般企业会计准则的区别
  • 什么是重大会计事务所
  • 商业模式诠释了一个企业如何赚钱
  • 常用的绘图比例有哪些?
  • 生育津贴的钱怎么取出来
  • 旅行社专票开票内容的规定
  • 生产成本结转库存商品,怎么算知道数量以及单价
  • RabbitMQ个人实践
  • 员工报销差旅费现金流量表里放在哪里
  • 住宿补贴怎么算
  • 利润表调整了资产负债表怎么调整
  • mysql@变量
  • 有进项发票没有销项发票怎样做账
  • 饭店开业多久可以正常
  • 所得税申报表营业成本包括哪些
  • 研发费用加计扣除的条件
  • 月末本年利润借方余额表示什么
  • 内含增长率简易公式如何理解
  • 小规模纳税人防伪税控会计分录
  • 增值税纳税申报表怎么填
  • 服务业成本的会计核算
  • 从一个公司到另一个公司叫什么
  • 产品成本核算有哪些方法
  • 职工福利费的核算内容
  • sql server 还原数据库后显示为备用只读
  • Windows XP/Vista/Windows 7常见蓝屏故障分析
  • 让Windows Server 2008设备驱动安装图文教程
  • 两台苹果怎么用电脑把数据同步
  • linux ultrasphinx Anonymous modules have no name to be referenced by
  • e ink launcher
  • win8系统打开软件闪退
  • win10 11月累计补丁KB3097877更新后导致应用崩溃该怎么办?
  • win7升级到win10系统软件还能用吗
  • win8系统怎样
  • 微软windows8.1
  • win8.1 安装ie10
  • 用linux配置ftp服务器的过程
  • Metaio in Unity3d 教程--- 四:再谈谈图片扫描之tracking配置文件
  • macos unity
  • 批处理清空文本内容
  • jquery简单例子
  • python 操作微信
  • 在jquery中fadein
  • jquery轮播代码
  • jquery编写Tab选项卡滚动导航切换特效
  • 判断页面是关闭还是开启
  • js判断浏览器内核和版本
  • jquery?
  • 税务局与地税局一样吗?
  • 黄金消费税税率是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设