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

  • 拼多多先用后付在哪里看额度(拼多多先用后付怎么突然用不了了)

    拼多多先用后付在哪里看额度(拼多多先用后付怎么突然用不了了)

  • 苹果12有几种尺寸呢(苹果12有几种尺寸屏幕)

    苹果12有几种尺寸呢(苹果12有几种尺寸屏幕)

  • 苹果11充一晚上电没事吧(苹果11充一晚上会对电池有影响吗)

    苹果11充一晚上电没事吧(苹果11充一晚上会对电池有影响吗)

  • 怎么下载优酷视频(怎么下载优酷视频到相册)

    怎么下载优酷视频(怎么下载优酷视频到相册)

  • 打印机墨盒是什么(打印机墨盒是什么样子)

    打印机墨盒是什么(打印机墨盒是什么样子)

  • 火山实名认证的好处(火山实名认证不了怎么回事)

    火山实名认证的好处(火山实名认证不了怎么回事)

  • 华为手机圆点怎么取消(华为手机圆点怎么设置取消不了)

    华为手机圆点怎么取消(华为手机圆点怎么设置取消不了)

  • 电子发票不能生成pdf(电子发票不能生成怎办)

    电子发票不能生成pdf(电子发票不能生成怎办)

  • 手机太久没有充电开不了机怎么办(手机太久没有充电开机黑屏)

    手机太久没有充电开不了机怎么办(手机太久没有充电开机黑屏)

  • 苹果11短信显示英文(苹果11短信显示时间怎么设置)

    苹果11短信显示英文(苹果11短信显示时间怎么设置)

  • 淘宝退货退款需要自己承担来回运费吗(淘宝退货退款需要和商家沟通吗)

    淘宝退货退款需要自己承担来回运费吗(淘宝退货退款需要和商家沟通吗)

  • 怎样解除密保手机号码(怎样解除密保手机)

    怎样解除密保手机号码(怎样解除密保手机)

  • 爱思助手备份密码是什么(爱思助手备份密码错误)

    爱思助手备份密码是什么(爱思助手备份密码错误)

  • 微信官网自助解除限制(微信官网自助解除限制网址)

    微信官网自助解除限制(微信官网自助解除限制网址)

  • 手机黑名单怎么解除(手机黑名单怎么设置成关机)

    手机黑名单怎么解除(手机黑名单怎么设置成关机)

  • 苹果11支持30w快充吗(苹果11支持30w快充伤电池吗为什么)

    苹果11支持30w快充吗(苹果11支持30w快充伤电池吗为什么)

  • 如何设置任务栏平铺xp(如何设置任务栏外观)

    如何设置任务栏平铺xp(如何设置任务栏外观)

  • 付款方式无效什么意思(付款方式都无效)

    付款方式无效什么意思(付款方式都无效)

  • 如何制作视频链接(如何制作视频链接文件)

    如何制作视频链接(如何制作视频链接文件)

  • vivoz3i怎么设置返回键(vivoz3i怎么设置高清通话)

    vivoz3i怎么设置返回键(vivoz3i怎么设置高清通话)

  • 手机内存6+128是什么意思(手机内存是6+128好还是8+128好)

    手机内存6+128是什么意思(手机内存是6+128好还是8+128好)

  • 谷歌浏览器如何设置首页(谷歌浏览器如何设置中文简体)

    谷歌浏览器如何设置首页(谷歌浏览器如何设置中文简体)

  • 图解cross attention(涌泉的准确位置图 图解)

    图解cross attention(涌泉的准确位置图 图解)

  • 个人取得上市公司股票期权个人所得税
  • 发票替代票
  • 银行会计核算方法的特点
  • 销售额负数怎么报税
  • 一个营业执照可以开几家淘宝店
  • 应发工资和实发工资计算公式excel
  • 退销售货款的现金流是哪一个
  • 报表申报错误怎么作废重报
  • 收购别人的公司要具备什么条件
  • 物业用房的装修费可以在土地增值税清算时扣除吗
  • 其他应付款转入营业外收入
  • 股东捐赠给企业资金保壳
  • 拆迁置换安置房
  • 驻外人员医保报销
  • 房租当月无发票怎么办
  • 关联企业税收
  • 只开增值税普通发票,需要申报税务吗
  • 单位报销托儿费
  • 个体户经营所得核定税率
  • 进项票税率不同怎么处理
  • 当月没有进项税额抵扣怎么办
  • 注册资本认缴与注册登记实操
  • 多交增值税如何做账
  • 研发费加计扣除做账务处理吗
  • 收到退回增值税和附加税怎么处理
  • 显卡硬件加速如何开启
  • 收到负数购入发票怎么办
  • 集团内部资金往来用什么科目核算
  • 安全系统不起作用或未正确安装 cad2016
  • php开源软件
  • php file_exists 检查文件或目录是否存在的函数
  • 补充医疗税前扣除还是税后扣除
  • linux的网络编程
  • php获取文件名后缀
  • 收据中代收款凭证
  • 企业信用贷款还款方式
  • 民非企业保险支出包括
  • php常用字符串
  • php循环字符串
  • WGAN(Wasserstein GAN)看这一篇就够啦,WGAN论文解读
  • uniapp零基础小白到项目实战
  • 人工智能lisp
  • javascript数据类型分为哪两类
  • 企业处置固定资产发生的净损失应计入
  • 新建厂房如何计提折旧费用
  • 长期股权投资入账
  • python复制文件的代码
  • 物业公司电费最多可以收多少钱一度
  • 代扣车船税手续费按多少返还
  • 用友t3怎样设置权限
  • 工资计提少了怎么办
  • 不动产发票开具规则
  • 有契税发票没有增值税发票
  • 怎样理解企业财务会计的定义
  • 电子发票服务平台怎么下载发票
  • 私营公司应付利息怎么算
  • mysql 连接语句
  • vcspawn.exe
  • w3dbsmgr.exe是什么进程
  • win8手机版
  • win10清理系统盘垃圾
  • windows7电脑怎么变快
  • quick-cocos2d-x如何在mac下编译安卓版本
  • js数据的基本类型有哪些
  • linux进程切换 宋宝华
  • shell中的括号
  • python发送mq消息
  • 深入理解python特性
  • javascript用处
  • unity closestpoint
  • js遍历foreach
  • layui jquery事件失效
  • 航天金税软件怎么下载
  • 河北农信登录密码错误
  • 苏宁易购的联系电话
  • 互联网新闻信息服务提供者为用户提供互联网新闻
  • 增值税税控开票软件升级
  • 广东国税局局长是谁
  • 车辆购置税查询官网
  • 年终奖怎么报个税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设