位置: 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外键约束的基本语法结构)

  • 微信接收的文件在哪个文件夹(微信接收的文件怎么删除)

    微信接收的文件在哪个文件夹(微信接收的文件怎么删除)

  • 打印机墨盒能用多久(打印机墨盒能用钢笔墨水吗)

    打印机墨盒能用多久(打印机墨盒能用钢笔墨水吗)

  • 微信文件传输助手的文件在哪里(微信文件传输助手是真人吗)

    微信文件传输助手的文件在哪里(微信文件传输助手是真人吗)

  • 苹果实况壁纸在哪下载(苹果实况壁纸在哪)

    苹果实况壁纸在哪下载(苹果实况壁纸在哪)

  • 爱奇艺怎么投屏不了(爱奇艺怎么投屏到投影仪)

    爱奇艺怎么投屏不了(爱奇艺怎么投屏到投影仪)

  • 抖音私信记录自动消失了(抖音私信记录能保留多久)

    抖音私信记录自动消失了(抖音私信记录能保留多久)

  • 华为快捷截图方法是什么(华为 截图 快捷)

    华为快捷截图方法是什么(华为 截图 快捷)

  • 华为nova7se的se是什么意思(华为huawei nova 7se的se是什么意思)

    华为nova7se的se是什么意思(华为huawei nova 7se的se是什么意思)

  • qq冠名是什么意思(qq冠名礼物有什么用)

    qq冠名是什么意思(qq冠名礼物有什么用)

  • 打印机状态空闲为啥打印不了(打印机状态空闲是什么意思)

    打印机状态空闲为啥打印不了(打印机状态空闲是什么意思)

  • 华为手机情景智能在哪里(华为手机情景智能怎么调出来)

    华为手机情景智能在哪里(华为手机情景智能怎么调出来)

  • qq怎么不显示在线状态(QQ怎么不显示在不在线)

    qq怎么不显示在线状态(QQ怎么不显示在不在线)

  • 微信自动下载的文件在哪里(微信自动下载的图片在哪个位置存储)

    微信自动下载的文件在哪里(微信自动下载的图片在哪个位置存储)

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

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

  • 抖音用微信登录授权在哪里(抖音用微信登录不了,未获得权限没有绑定微信)

    抖音用微信登录授权在哪里(抖音用微信登录不了,未获得权限没有绑定微信)

  • 淘宝中评对卖家的影响(淘宝中评对卖家有用吗)

    淘宝中评对卖家的影响(淘宝中评对卖家有用吗)

  • airpods重置15秒没反应(airpods重置15秒没反应是不是假货)

    airpods重置15秒没反应(airpods重置15秒没反应是不是假货)

  • qq怎么续火花(qq怎么续火苗)

    qq怎么续火花(qq怎么续火苗)

  • 苹果型号ml是什么版本(苹果型号ml是什么意思)

    苹果型号ml是什么版本(苹果型号ml是什么意思)

  • qq在关机状态下显示什么(关机了qq显示成什么状态?)

    qq在关机状态下显示什么(关机了qq显示成什么状态?)

  • qq卸载了聊天记录还在吗(qq卸载了聊天记录没有了怎么恢复)

    qq卸载了聊天记录还在吗(qq卸载了聊天记录没有了怎么恢复)

  • xp系统任务栏消失了

    xp系统任务栏消失了

  • 乐视账号怎么强行解绑(乐视2怎么跳过乐视账号)

    乐视账号怎么强行解绑(乐视2怎么跳过乐视账号)

  • 荣耀20青春版支持超广角拍摄吗(荣耀20青春版支持电信卡吗)

    荣耀20青春版支持超广角拍摄吗(荣耀20青春版支持电信卡吗)

  • 快手已戳对方知道吗(快手已戳对方知道了吗)

    快手已戳对方知道吗(快手已戳对方知道了吗)

  • 微信的注册在哪里(微信注册在哪儿)

    微信的注册在哪里(微信注册在哪儿)

  • wps里怎么查找内容(wps怎么查找内容全部导出)

    wps里怎么查找内容(wps怎么查找内容全部导出)

  • 苹果11怎么连接无线耳机(苹果11怎么连接itunes)

    苹果11怎么连接无线耳机(苹果11怎么连接itunes)

  • 电脑美图秀秀怎么改照片大小(电脑美图秀秀怎么换背景颜色)

    电脑美图秀秀怎么改照片大小(电脑美图秀秀怎么换背景颜色)

  • 完整的ES6面试题(es6面试题promise)

    完整的ES6面试题(es6面试题promise)

  • 个税申报的收入扣除社保吗
  • 印花税都有啥
  • 企业所得税如何规避
  • 税务ukey如何清卡
  • 增值税认证勾选平台
  • 征税和补贴对市场结果的影响
  • 企业所得税季报时间
  • 银行承兑汇票背书可以拆分
  • 年末结转增值税之后增值税有余额嘛
  • 土地增值税清算规程实施细则
  • 会计凭证如何填写
  • 长期待摊费用可以抵扣吗
  • 季度收取租金会计分录怎么写?
  • 其他扣款税后应该怎么做账?
  • 产品成本计算的公式
  • 当月增次月是什么意思
  • 忘记申报印花税,但是公司已经注销了怎么办
  • 国税网不能打印,怎么设置
  • 公司费用种类
  • 拿到省级奖有什么用
  • 无偿划转净资产为负数的企业账务处理
  • 年报中包括处置资金吗
  • 待抵扣进项税 待认证进项税
  • 50万股份分红
  • 企业注销时未分配利润怎么处理
  • 年金是根据什么计算的
  • 单位探望病人如何报销费用?
  • 存货跌价准备的分录
  • 苹果笔记本如何切换输入法
  • 经费支出渠道
  • win10 20h1 bug
  • 加班工资怎么计算劳动法
  • 公司购买自己公司的产品
  • PHP:iterator_count()的用法_spl函数
  • 收费公路通行费财政电子票据可以抵扣吗
  • 应收票据利息会计科目
  • 其他应付款转资本公积股东决议
  • 取得企业债券利息为什么要交个人所得税
  • 企业新产品销售收入数据
  • timit数据集
  • php uniqueid
  • vue国际化占位符
  • python脚本例子
  • phpcms怎么样
  • 增值税发票退回重开期限
  • 融资租赁的利息进项税可以抵扣吗
  • 关于SQL Server安全控制的说法正确的是
  • 财务费用 科目
  • 收到的技术服务费计入什么科目
  • 资本公积的账务处理例题
  • 生产自己的产品
  • 小规模纳税人记账报税流程
  • 未分配利润是负数怎么消化掉
  • 暂估入库一直没冲会怎么样
  • 行政拨付工会经费可以用于职工福利发放吗
  • 缴纳上月附加税怎么做分录
  • 劳务费收入交印花税吗
  • 制造费用结转到哪个科目
  • 年初建账考虑要点有哪些
  • mysql8 存储引擎
  • Mac OS10.11下mysql5.7.12 安装配置方法图文教程
  • fedora s7
  • rundll32.exe在哪个文件夹
  • csinsmnt.exe进程的作用介绍 csinsmnt是什么进程
  • macair蓝牙用不了
  • win10一年更新一次
  • linux就该这么些
  • win7电脑耳机插上还是外放
  • nodejs rbac
  • android开发环境安装步骤
  • 如何使用css进行网页布局,举例说明
  • Quick cocos2dx-Lua(V3.3R1)学习笔记(十三)-----继续触摸事件之多点触摸
  • javascript基础笔记
  • 怎样屏蔽锁屏广告
  • android PopupWindow显示位置设置
  • javascript面向对象编程指南第三版
  • won10安装
  • 什么是个人所得税起征点
  • 国税巡察反馈意见建议
  • 国企重组裁员政策解读
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设