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

  • 抖音怎么找人(抖音怎么找人不知道抖音号和昵称)

    抖音怎么找人(抖音怎么找人不知道抖音号和昵称)

  • 苹果xr怎么恢复照片(苹果xr怎么恢复删除的照片)

    苹果xr怎么恢复照片(苹果xr怎么恢复删除的照片)

  • 荣耀9x怎么升级emui10(荣耀9x怎么升级EMUI10.1.1系统)

    荣耀9x怎么升级emui10(荣耀9x怎么升级EMUI10.1.1系统)

  • 手机突然不能语音输入(手机突然不能语音识别)

    手机突然不能语音输入(手机突然不能语音识别)

  • 快手小黄车必须交保证金吗(快手小黄车必须交1000吗)

    快手小黄车必须交保证金吗(快手小黄车必须交1000吗)

  • 华为p20后壳开胶原因(华为p20后壳开胶图片)

    华为p20后壳开胶原因(华为p20后壳开胶图片)

  • 小米系统内测的有效期为多久(小米系统内测的有效期为多少)

    小米系统内测的有效期为多久(小米系统内测的有效期为多少)

  • 键盘打不出字怎么办(键盘打不出字怎么回事按哪个键)

    键盘打不出字怎么办(键盘打不出字怎么回事按哪个键)

  • iphone11怎么辨别国行(苹果11如何辨别)

    iphone11怎么辨别国行(苹果11如何辨别)

  • 抖音怎么隐藏关注(抖音怎么隐藏关注和喜欢)

    抖音怎么隐藏关注(抖音怎么隐藏关注和喜欢)

  • 抖音举报人别人会知道吗(抖音举报他人)

    抖音举报人别人会知道吗(抖音举报他人)

  • 苹果拉黑的号码在哪看(苹果拉黑的号码可以收到短信吗)

    苹果拉黑的号码在哪看(苹果拉黑的号码可以收到短信吗)

  • word文档怎么添加线条(word文档怎么添加大括号)

    word文档怎么添加线条(word文档怎么添加大括号)

  • 华为 mate 30 5g 上市时间(华为mate 30系列5g手机)

    华为 mate 30 5g 上市时间(华为mate 30系列5g手机)

  • 如何做地球自转flash动画(如何做地球自转模型)

    如何做地球自转flash动画(如何做地球自转模型)

  • 拼多多取件码在哪找(拼多多上的取件码)

    拼多多取件码在哪找(拼多多上的取件码)

  • 苹果x前面的灯怎么闪烁(苹果x前面灯光闪烁怎么设置)

    苹果x前面的灯怎么闪烁(苹果x前面灯光闪烁怎么设置)

  • excel受保护的视图怎么解除(excel受保护的视图怎么解除不掉怎么办)

    excel受保护的视图怎么解除(excel受保护的视图怎么解除不掉怎么办)

  • iphone 双卡如何切换(iphone 双卡如何切换信息)

    iphone 双卡如何切换(iphone 双卡如何切换信息)

  • 交管12123系统繁忙怎么回事(交管12123系统繁忙c100037)

    交管12123系统繁忙怎么回事(交管12123系统繁忙c100037)

  • vivox27手机能扫脸解锁吗(vivo手机有没有扫描功能,怎么用?)

    vivox27手机能扫脸解锁吗(vivo手机有没有扫描功能,怎么用?)

  • 如何在淘宝网上发帖子(如何在淘宝网上购买商品)

    如何在淘宝网上发帖子(如何在淘宝网上购买商品)

  •  实况照片怎么发朋友圈(实况照片怎么截取一张)

    实况照片怎么发朋友圈(实况照片怎么截取一张)

  • u盘删除不了文件(u盘删除不了文件写有保护)

    u盘删除不了文件(u盘删除不了文件写有保护)

  • 直布罗陀巨岩上的人行天桥 (© Stephen Ball/Alamy)(直布罗陀巨岩山)

    直布罗陀巨岩上的人行天桥 (© Stephen Ball/Alamy)(直布罗陀巨岩山)

  • 进口商品需要缴纳VAT税吗
  • 企业返聘退休人员劳务合同
  • 收到现金分红的会计分录
  • 发行股票的手续费计入什么费用
  • 分公司法人必须是总公司法人吗
  • 少做收入第二年怎么算
  • 报废过期产品怎么做会计分录
  • 他人购买股权个人所得缴纳个人所得税率是多少?
  • 期末小规模纳税人差额纳税的会计处理分析
  • 工程预收账款的会计分录
  • 小型企业缴纳企业所得税
  • 出口转内销补交关税
  • 纳税调整税收金额
  • 员工替公司垫付的费用还没有报销就被开除了
  • 账本印花税怎么缴纳
  • 用于集体福利的进项税额转出
  • 公司购买理财产品的收益计入什么科目
  • 网络发票和纸质发票不一致会计处理
  • 有合同未收到租金税务如何处理?
  • 增值税减少对企业的利弊
  • 小微企业附加税怎么算
  • 企业收到税前投资分红如何缴纳增值税?
  • Proxy error: Could not proxy request 解决方法
  • 主办会计工作注意什么
  • 固定资产清理会发生什么费用
  • 怎么删除office
  • PHP:xml_set_external_entity_ref_handler()的用法_XML解析器函数
  • services. exe
  • 怎么提升电脑速度
  • 公司账户转账到出纳个人账户
  • 车辆违章罚款可以报销吗
  • 交易性金融资产的账务处理
  • php的json_encode
  • 红字发票如何开具
  • vue中methods的作用
  • Vue2 Element description组件 列合并
  • php微信公众号开发框架
  • phpstudy命令行
  • 如何测试php
  • 中国烟草资产负债表
  • 所得税费用会计处理
  • MySQL5.1忘记root密码的解决办法(亲测)
  • access数据库用户名和密码
  • sqlserver2005没有实例
  • sql server怎么升级版本
  • mysql分片sql
  • 小规模申报表填写
  • 税局代开专票如何做账务处理?
  • 发票融资贷款怎么做账
  • 发票失控进项转出所得税
  • 个人给国外公司提供服务
  • 设备租金收入计什么科目
  • 备用金账目处理
  • 分公司和总公司在一个地方
  • 农产品如何进入批发市场
  • 银行对账单冲正的单据在财务软件哪里找
  • 专用发票过期未认证最新规定
  • 小规模纳税人哪里可以查
  • 法人在公司账户取钱要纳税么
  • 开票软件服务费计入什么会计科目
  • 应收账款转让会计分录 未实际收到对价
  • centos6.10安装
  • vmware安装centos7超详细过程 图文
  • windows7的所有操作都可以从( )
  • win8删除所有文件
  • windows一体机
  • SCHDPL32.EXE - SCHDPL32是什么进程 有什么用
  • debian怎么用
  • w8系统鼠标在哪里调
  • opengles 旋转 平移 缩放
  • node.js配置
  • Android使用领域
  • linux的ls-l命令
  • nodejs mysql库
  • jquery创建表格
  • 简述javascript
  • 四川国税网上申报
  • 税务机关党建动员大会
  • 收到税务局发的多条宣传短信
  • 福建 退休
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设