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

  • iqoo8pro怎么截长图(iqoo7怎么截长图)

    iqoo8pro怎么截长图(iqoo7怎么截长图)

  • 抖音可以看到最近谁浏览了吗(抖音可以看到最近看的直播吗)

    抖音可以看到最近谁浏览了吗(抖音可以看到最近看的直播吗)

  • 微信左下角显示1,却没有未读消息(微信左下角老是有个1)

    微信左下角显示1,却没有未读消息(微信左下角老是有个1)

  • 苹果xr有时候会出现屏幕按不动(苹果xr有时候会自动重启)

    苹果xr有时候会出现屏幕按不动(苹果xr有时候会自动重启)

  • 怎么设置qq群龙王标识(怎么设置qq群龙在线)

    怎么设置qq群龙王标识(怎么设置qq群龙在线)

  • oppoace后盖是什么材质(oppoace后盖碎了自己能换吗)

    oppoace后盖是什么材质(oppoace后盖碎了自己能换吗)

  • 淘宝商品过期不存在怎么回事 店铺还在(淘宝商品过期不存在怎么回事 店铺不在)

    淘宝商品过期不存在怎么回事 店铺还在(淘宝商品过期不存在怎么回事 店铺不在)

  • oppoa79如何重启手机(oppoa72怎么重启)

    oppoa79如何重启手机(oppoa72怎么重启)

  • 微信卸载重装后好友还在嘛(微信卸载重装后群聊找不到了怎么办)

    微信卸载重装后好友还在嘛(微信卸载重装后群聊找不到了怎么办)

  • iphone11抖音显示不全(苹果11如何解决抖音显示不全)

    iphone11抖音显示不全(苹果11如何解决抖音显示不全)

  • 苹果手机怎么没有手写功能(苹果手机怎么没有父亲节)

    苹果手机怎么没有手写功能(苹果手机怎么没有父亲节)

  • 数据库和文件系统的区别(数据库和文件系统一样吗)

    数据库和文件系统的区别(数据库和文件系统一样吗)

  • 关机和被拉黑的区别(关机跟拉黑)

    关机和被拉黑的区别(关机跟拉黑)

  • 微博上下的软件怎么删(微博app内下载的软件)

    微博上下的软件怎么删(微博app内下载的软件)

  • 苹果11双电信卡设置(苹果11双电信卡使用教程)

    苹果11双电信卡设置(苹果11双电信卡使用教程)

  • vivos1pro支持快充吗(vivos1pro充电器)

    vivos1pro支持快充吗(vivos1pro充电器)

  • pr添加字幕如何移动(pr添加字幕如何保持一个大小)

    pr添加字幕如何移动(pr添加字幕如何保持一个大小)

  • 华为云空间满了怎么清理(华为云空间满了怎么删除照片)

    华为云空间满了怎么清理(华为云空间满了怎么删除照片)

  • 共享单车的卫星定位在哪里(共享单车卫星定位在什么位置装着)

    共享单车的卫星定位在哪里(共享单车卫星定位在什么位置装着)

  • 抖音上显示网络不可用是怎么回事儿?(抖音上显示网络刷新什么意思)

    抖音上显示网络不可用是怎么回事儿?(抖音上显示网络刷新什么意思)

  • 苹果11什么时候上市(苹果11什么时候上市的)

    苹果11什么时候上市(苹果11什么时候上市的)

  • ps标尺工具怎么用(ps标尺工具怎么看长度)

    ps标尺工具怎么用(ps标尺工具怎么看长度)

  • iphone怎么把图片反色(iphone怎么把图片镜像翻转)

    iphone怎么把图片反色(iphone怎么把图片镜像翻转)

  • 关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现(关于我的家乡作文1000字)

    关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现(关于我的家乡作文1000字)

  • 使用Node.js手撸一个建静态Web服务器,内部CV指南(node-js)

    使用Node.js手撸一个建静态Web服务器,内部CV指南(node-js)

  • 小规模纳税人不开票需要纳税吗
  • 新公司季初资产总额和季末资产总额怎么填
  • 个人账户发工资扣税吗
  • 工资及工资性支出
  • 营业税金及附加包括增值税吗
  • 开具银行资信证明
  • 知识产权局专利审查协作中心
  • 子公司注销应收母公司往来款
  • 账簿保管期满如何销毁
  • 增值税普通发票需要交税吗
  • 个体工商户需要每个月报税吗
  • 员工自己承担的商业保险费是多少
  • 固定资产清理不能有余额
  • 补计提去年的折旧该怎么做账
  • 房地产企业作为甲方开票给施工单位
  • 企业可根据实际情况随意设置会计科目
  • 进项税超过销项怎么办?
  • 劳务费税收分类是什么
  • 离职补偿金个税计算器2022
  • 个体工商户税收怎么算
  • 小规模纳税人应纳税额的计算
  • 计提水电费是什么凭证
  • 月末在产品直接人工成本怎么算
  • 个人所得税成本费用怎么算
  • 小规模自开专票税率是1%还是3%
  • 专用发票和普通发票的税率
  • 事业单位发放的工作经费计入哪个科目
  • 租金怎么来计算个税
  • 减免的城建税如何申报
  • 在windows7中,使用鼠标拖放功能
  • thinkphp框架介绍
  • 网关设置
  • 如何在Windows11上下载和安装 Minecraft
  • 企业长期借款的利息,有可能计入的科目有( )
  • 纳税人购进农产品取得
  • 公积金贷款所需手续
  • ctblocker
  • 无票收入什么时候确认收入
  • 土地使用税缴纳人是使用者还是所有权人
  • citespace关键词共现分析
  • vue导出word文档打开报错,内容有问题
  • thinkphp伪静态nginx
  • 企业所得税可以结转以后年度扣除的费用
  • 新准则下公允价值变动损益纳税调整
  • php数组处理函数array_push会影响源数组的元素吗
  • convert convert
  • phpcms api
  • 物业管理可以开保洁发票吗
  • java 代码简洁
  • 计提工资是什么时候计提
  • 职工福利费允许扣除比例
  • 在建工程领用自产应税消费品
  • 合同可以盖财务章子吗
  • 法定盈余公积的主要用途
  • 管理费用应该如何分摊 dcf
  • 政府补助会计核算
  • 未取得发票能计入在建工程吗
  • 印花税计提金额怎么算
  • 242104 税控盘
  • 制造费用怎么结算
  • 物流公司会计工作内容
  • 职工福利费核算哪些内容
  • sqlserver存储过程if语句
  • linux服务端
  • 用u盘重新装系统
  • winvnc.exe进程是什么
  • Red Hat Enterprise Linux 4+Nginx 0.7.47+PHP5.2+MYSQL5.0+Memcache+eAccelerator收
  • win10打
  • win7系统怎么禁止更新
  • easyui给下拉框赋值
  • ES6 javascript中Class类继承用法实例详解
  • 一个简单的灵魂福楼拜
  • win10如何使用命令
  • unity 游戏
  • JQuery 设置checkbox值二次无效的解决方法
  • 医保已申报未缴费可以撤销申报吗
  • 广西2023新农合报销政策
  • 江苏税务网上办税服务厅服务提醒
  • 电子税务局个体工商户如何登陆
  • 云南4050人员2020最新政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设