位置: IT常识 - 正文

解决router.beforeEach()动态加载路由出现死循环问题(解决掉发的有效方法)

编辑:rootadmin
这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 目录

推荐整理分享解决router.beforeEach()动态加载路由出现死循环问题(解决掉发的有效方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:解决的英文,解决的英文,解决口苦最快的方法,解决掉发的有效方法,解决口苦最快的方法,解决中暑最有效方法,解决烧心最快方法,解决的英文,内容如对您有帮助,希望把文章链接给更多的朋友!

router.beforeEach()动态加载路由出现死循环1、router.beforeEach( to , from ,next) 介绍2、两种死循环问题vue动态加载路由进入页面白屏或beforeEach死循环踩坑router.beforeEach()动态加载路由出现死循环

采用beforeEach做路由过滤,如果没登录就直接跳转到登录界面,然而发现个问题就是要么跳转到登录页面、然后再调回首页,要么卡着不动、要么出现空白页面。

1、router.beforeEach( to , from ,next) 介绍to: 即将路由的地址form: 当前的路由地址,也就是马上要离开的地址next(): 执行进入下一个路由next(false): 禁止进入下一个路由next('/login'): 路由到/login地址2、两种死循环问题

(1)路由到相同地址的死循环

比如在beforeEach中设置未登录(userData为null)就跳转到登录页面

在非登录页面是没有问题的,但是在登录页面就出现了死循环或者空白页,通过打印我们发现浏览器在登录页反复跳转。

在登录页面因为没登录,userData为null,这时候通过next(’\login’)就会重定向到登录页面,重定向到登录页面后,这时候userData依然为空,那么就要继续重定向登录页面,于是出现了死循环。

对这种情况加个判断条件就能解决。

解决router.beforeEach()动态加载路由出现死循环问题(解决掉发的有效方法)

(2)动态加载路由表出现的死循环

在beforeEach()通过动态加载路由表

在beforeEach()中都会获取路由表存入store,然后从store取出动态加入此路由表。

但是每次路由之前都会重新添加路由表,每次添加完路由表当前默认路径是首页(to.path显示内容)而不是登陆页面,页面会自动跳转到首页,但是如果这时候通过next(’/login’)跳转到登录页面,那么就会重新路由,在路由前又开始重新添加路由表,然后当前路径是首页,这时候又要跳转到登录页面因此就会出现死循环。

这时候我们就不能反复加载路由表,加个判断条件就行了。

vue动态加载路由进入页面白屏或beforeEach死循环踩坑

开发的哥们儿从网上找了一个简单的框架,通过auth的配置来决定什么权限可以进入到什么页面。具体操作就是登陆获取用户的权限,然后遍历本地的总路由表匹配权限返回当前用户可以访问的路由表。网上大多数的方案是从后端接口获取权限和路由表。此为两者之间的差异,但是不影响填坑方案的可行性

先放上本地总路由表部分代码,就是在这个表中根据权限进一步遍历筛选的,通过硬编码的方式写在项目中,auth[]内用数字、用中文、用单词也都是可以的

const routerList = [{path: '/',component: Layout,redirect: '/dashboard',auth: [0, 1, 2],meta: {title: '首页',icon: 'dashboard'},children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: {title: '首页',icon: 'dashboard'},auth: [0, 1, 2]}]},{path: '/enterprises',component: Layout,name: 'Enterprises',redirect: 'noRedirect',auth: [0, 1, 2],meta: {title: '智慧园区',icon: 'el-icon-office-building'},children: [{path: 'huanjingjiance',name: 'huanjingjiance',component: () => import('@/views/environment/monitor'),auth: [0, 2],meta: {title: '环境监测'},}]},{path: '/user',component: Layout,name: 'User',redirect: 'noRedirect',auth: [0, 1],meta: {title: '人员信息',icon: 'el-icon-user'},children: [{path: 'index',name: 'Index',component: () => import('@/views/user/index'),meta: {title: '个人信息'},auth: [0, 1],}]}]

首先在路由中需要指定登录的页面,这个是不分权限的,所以不需要动态获取

const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true},...dynamicRouter]var createRouter = () => new Router({mode: 'history',scrollBehavior: () => ({y: 0}),routes: constantRoutes})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。

本文链接地址:https://www.jiuchutong.com/zhishi/310505.html 转载请保留说明!

上一篇:dedecms织梦二次开发独立点赞功能(织梦可以放两个模板吗)

下一篇:mysql外键约束有什么要求(mysql外键约束的基本语法结构)

  • 支付宝健康码怎么解除绑定家人(支付宝健康码怎么弄出来)

    支付宝健康码怎么解除绑定家人(支付宝健康码怎么弄出来)

  • 格力空调怎么设置定时关闭(格力空调怎么设置制冷效果最好)

    格力空调怎么设置定时关闭(格力空调怎么设置制冷效果最好)

  • 华为nova9怎么设置门禁卡(华为nova9怎么设置24小时制)

    华为nova9怎么设置门禁卡(华为nova9怎么设置24小时制)

  • 抖音破播放什么意思(抖音破播放之后再怎么办?)

    抖音破播放什么意思(抖音破播放之后再怎么办?)

  • wps编辑数据链接不可用(wps编辑数据链接怎么用)

    wps编辑数据链接不可用(wps编辑数据链接怎么用)

  • 华硕win10键盘失灵(华硕win10键盘无效)

    华硕win10键盘失灵(华硕win10键盘无效)

  • 蓝牙耳机怎么拆开修理(蓝牙耳机怎么拆开修理视频)

    蓝牙耳机怎么拆开修理(蓝牙耳机怎么拆开修理视频)

  • 苹果手机拉黑人后提示(苹果手机拉黑人换个手机会保持拉黑吗)

    苹果手机拉黑人后提示(苹果手机拉黑人换个手机会保持拉黑吗)

  • 在计算机网络中通常把提供并管理共享资源的计算机称为(在计算机网络中,英文缩写WAN的中文名是)

    在计算机网络中通常把提供并管理共享资源的计算机称为(在计算机网络中,英文缩写WAN的中文名是)

  • 淘宝追加评价有时间限制吗(淘宝追加评价有效期多久)

    淘宝追加评价有时间限制吗(淘宝追加评价有效期多久)

  • 微信的好处有哪些(微信有那些好处)

    微信的好处有哪些(微信有那些好处)

  • 华为nova5支持防水吗(华为nova5防窥膜都不能指纹吗)

    华为nova5支持防水吗(华为nova5防窥膜都不能指纹吗)

  • 爱奇艺vip电影如何下载(爱奇艺VIP电影如果搞到U盘)

    爱奇艺vip电影如何下载(爱奇艺VIP电影如果搞到U盘)

  • 电脑电源线颜色分别代表什么(电脑电源线颜色详解)

    电脑电源线颜色分别代表什么(电脑电源线颜色详解)

  • mrjn2ch a是ipad几(mrjn2cha是ipad什么型号)

    mrjn2ch a是ipad几(mrjn2cha是ipad什么型号)

  • 华为nova5pro怎么设置来电闪光灯(华为nova5pro怎么恢复出厂设置)

    华为nova5pro怎么设置来电闪光灯(华为nova5pro怎么恢复出厂设置)

  • vivo s5什么时候发布(vivos5什么时候出厂)

    vivo s5什么时候发布(vivos5什么时候出厂)

  • 荣耀20支持红外遥控吗(荣耀20支持红外和nfc)

    荣耀20支持红外遥控吗(荣耀20支持红外和nfc)

  • 小米8支持红外遥控么(小米8支持红外线遥控器吗)

    小米8支持红外遥控么(小米8支持红外线遥控器吗)

  • 华为备胎芯片指什么(就华为的备胎计划,命运掌握在自己手中)

    华为备胎芯片指什么(就华为的备胎计划,命运掌握在自己手中)

  • 台式键盘fn键在哪(台式键盘fn键在哪个位置)

    台式键盘fn键在哪(台式键盘fn键在哪个位置)

  • 华为荣耀9怎么实现AI识屏购物(华为荣耀9怎么退出程序)

    华为荣耀9怎么实现AI识屏购物(华为荣耀9怎么退出程序)

  • coral00是华为什么型号手机(coral00华为什么型号多少钱)

    coral00是华为什么型号手机(coral00华为什么型号多少钱)

  • 增值税发票丢失最新处理办法
  • 城市维护建设税为什么是流转税
  • 开诊所会计如何做账
  • 工资走公账和私账哪个好
  • 企业中征码全称
  • 资产负债表月报期末余额怎么填
  • 用携税宝怎么申报增值税
  • 发放遗属补助还要拍照片吗山东
  • 押金不退转收入的情况说明
  • 预提佣金会计分录是什么
  • 应付职工薪酬的计税基础
  • 高危职业人身意外险
  • 公司缴纳工会经费会计分录怎么写
  • 计提资产减值准备是利好还是利空?
  • 生产前和生产后经常长喘气怎么回事
  • 公司注销取不到采购发票怎么汇算清缴?
  • 对方公司不能开发票怎么办
  • 可以给行政事业单位开增值税专用发票吗
  • 不能抵扣的进项税额转出会计分录
  • 个人购买办公楼出租要交税吗
  • 关于环保税税目正确的有
  • 合营安排与共同安排区别
  • 发出商品确认收入的条件
  • 公司注销无法支付的款项如何处理
  • 专项储备属于利润分配吗
  • 用友t8怎么删除凭证
  • 房地产开发企业资质证书
  • 宽带调制解调器出现问题怎么解决
  • 鸿蒙3.0内测申请成功显示名额已满
  • php strlen函数和mb_strlen
  • 按简易办法征收增值税的行为有
  • 发票认证了但是没收到票怎么处理
  • linux必不可少的分区
  • 权限控制的原则是什么
  • 公司收到财政拨付办公经费
  • 以前年度企业所得税分录
  • 小企业会计准则2023电子版
  • 固定资产未提完折旧可以报废吗
  • springboot+chatgpt+chatUI Pro开发智能聊天工具
  • php静态方法可以被继承吗
  • 给工程项目买保险合法吗
  • 投资性房地产在资产负债表哪个科目
  • 会计在账本上怎么记账
  • 会计调整以前年度遗留问题查不出来说明怎么写
  • 保险费支出是什么意思
  • 案例详解:功能点估算法
  • python多进程间通信
  • mongodb管道操作符
  • 百旺连接服务器失败,是否使用离线文件进行更新
  • 营销策划协议
  • 企业税预缴在哪里
  • 公司向法人借款有税务风险吗
  • 负数发票跨月怎么报税
  • 公司的零星费用可以用对公转吗
  • 一般纳税人增值税申报操作流程
  • 主营业务收入净额指的是什么
  • 政府补贴收入确认政策
  • 免税蔬菜税额用什么表示
  • 超市会计如何核算成本
  • sql教程
  • win7系统中怎么卸载安装的软件
  • linux的ip查看
  • switcher.exe - switcher是什么进程
  • 邮件版本
  • linux中内存是2GB,虚拟内存应该是多少
  • win7开机提示音在哪里关闭
  • Windows8和Windows Phone8中IE10两者相同点和区别
  • Linux编译内核无法启动
  • win10系统附件在哪里
  • perl use cwd
  • 狗刨好学吗
  • python输入错了怎么办
  • 安卓键盘软件
  • 魔兽世界全部开发成本
  • jquery跨域请求有哪些方式
  • 摩托车车船税怎么收费标准
  • 预征率是2%怎么计算
  • 大连国家税务局官网
  • 税务稽查工作底稿属于什么证据
  • 转租土地合法吗现在
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设