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

  • 企业所得税年报补报
  • 收入准则范围内
  • 企业变更股东需要本人到场吗
  • 增值税专用发票的三流合一是什么意思
  • 收到的普通发票需要认证吗
  • 股东个人向公司借款会计分录
  • 个人转租房屋是什么意思
  • 进货有商业折扣商品怎么入库
  • 其他业务收入的核算内容
  • 非居民企业股权转让协议
  • 增值税发票三个点
  • 项目收入怎么算
  • 企业土地是不是都应该缴纳房产税?
  • 微信支付有优惠 系统异常
  • 税控盘的购买流程
  • 一般纳税人如何零申报
  • 库存商品暂估成本多少合适
  • 网店提现要多久能到账
  • 华为鸿蒙怎么搞
  • win10鼠标在哪
  • 计提当月电费账务处理
  • 什么情况下公司可以开除员工
  • 广告制作包括印花吗
  • 辞退补偿金怎么算n1吗
  • win7系统为什么没有虚拟光驱
  • 升级w10系统
  • 代扣代缴个人所得税怎么申报
  • 应收票据与应付票据的使用与哪种银行结算方式有关
  • PHP:is_writeable()的用法_Filesystem函数
  • 应收债权换入无形资产
  • 离退休干部书报费有关文件
  • 世界上最贵的鼠标是用什么做的
  • sci期刊投稿步骤
  • 百度飞桨paddle
  • 怎么分析一个企业的营销策略
  • 暂估增值税可以抵扣吗
  • php防止sql注入的方法
  • 前端axios是什么
  • 雷瓦老板
  • 外管证预缴税费怎么算
  • centos7配置自动获取ip
  • 清除命令窗口所有内容用()命令,清除变量用()命令
  • 个体工商户注册需要什么材料
  • 弥补以前年度亏损最多几年
  • linux下安装mysql数据库5.6源码安装,修改登录用户密码
  • 固定资产原值和净值的区别
  • 增值税专用发票丢了怎么补救
  • 发票未及时开,但是双方会计已经做帐,怎么办?
  • 国库集中支付是什么意思
  • 自产产品用于不动产
  • 其他应收款贷方余额怎么调整
  • 发票冲销后还能用吗
  • 动物园会计核算办法
  • 总分类账户与明细分类账户是对账户按照其
  • 限额领料单属于什么凭证多选题
  • XP系统升级WIN7系统
  • win10系统登录密码怎么取消
  • linux中链接
  • win ubuntu
  • auepuf.exe是什么进程
  • WinXP系统建立VPN连接虚拟专用网络连接的途径
  • windows8中“同步你的设置”使用介绍(让你的设置自动同步)
  • windows开启快速启动
  • win8.1如何设置
  • 两台没联网的电脑怎么创建局域网
  • shell脚本 $?
  • js中使用组件
  • shell echo-e
  • python教程详细
  • linux 监视器
  • jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
  • javascript怎么学
  • JavaScript中的变量名不区分大小写
  • Javascript this 关键字 详解
  • 湖南省电子国税
  • 增值税差额征税什么意思
  • 年度纳税申报基础信息表怎么填
  • 5种方式教你如何查询
  • 郑州市国家税务局地址在哪里
  • 江苏电子税务局网址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设