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

  • 华为手机怎么下载支付宝(华为手机怎么下载微信)

    华为手机怎么下载支付宝(华为手机怎么下载微信)

  • 红米7a安卓版本是多少(红米安卓7.0通用升级包)

    红米7a安卓版本是多少(红米安卓7.0通用升级包)

  • 把对方手机号码拉黑还能收到信息和电话吗(把对方手机号码拉黑还能加微信吗)

    把对方手机号码拉黑还能收到信息和电话吗(把对方手机号码拉黑还能加微信吗)

  • mac显示桌面的快捷键(macos 显示桌面快捷键)

    mac显示桌面的快捷键(macos 显示桌面快捷键)

  • 在计算器上ac叫做什么键(在计算器上ac叫做什么键o)

    在计算器上ac叫做什么键(在计算器上ac叫做什么键o)

  • 移动卡突然没信号了怎么回事(移动卡突然没信号了怎么回事华为)

    移动卡突然没信号了怎么回事(移动卡突然没信号了怎么回事华为)

  • qq旋风还能用吗(qq旋风为什么不能用了)

    qq旋风还能用吗(qq旋风为什么不能用了)

  • 路由器为啥换一个就不能用了(路由器为什么要换新的)

    路由器为啥换一个就不能用了(路由器为什么要换新的)

  • 联通电视iptv什么意思

    联通电视iptv什么意思

  • 剪映怎么调整视频顺序(剪映怎么调整视频秒数)

    剪映怎么调整视频顺序(剪映怎么调整视频秒数)

  • qq离线请留言是隐身吗(qq离线请留言是退出账号了吗)

    qq离线请留言是隐身吗(qq离线请留言是退出账号了吗)

  • iphone11和pro的对比(iphone11对比pro)

    iphone11和pro的对比(iphone11对比pro)

  • 网易云音乐车载蓝牙调频怎么设置(网易云音乐车载蓝牙不显示歌词)

    网易云音乐车载蓝牙调频怎么设置(网易云音乐车载蓝牙不显示歌词)

  • vivox27怎么开启微信美颜(vivoX27怎么开启老年模式)

    vivox27怎么开启微信美颜(vivoX27怎么开启老年模式)

  • 苹果11强制重启方法(苹果11强制重启没反应)

    苹果11强制重启方法(苹果11强制重启没反应)

  • 小米8se是锂电池吗(小米8se电池电压是几伏)

    小米8se是锂电池吗(小米8se电池电压是几伏)

  • icpms全称是什么(icp-ms全称)

    icpms全称是什么(icp-ms全称)

  • 苹果屏幕有白斑正常吗(苹果屏幕有白斑要紧吗图片)

    苹果屏幕有白斑正常吗(苹果屏幕有白斑要紧吗图片)

  • 收藏的网页到哪找(收藏的网页在哪)

    收藏的网页到哪找(收藏的网页在哪)

  • 拼多多is备案截图在哪里(拼多多备案截图是什么去哪截)

    拼多多is备案截图在哪里(拼多多备案截图是什么去哪截)

  • 微信的交易记录删除后还能看到吗(微信的交易记录能彻底删除吗)

    微信的交易记录删除后还能看到吗(微信的交易记录能彻底删除吗)

  • win10怎么设置gif壁纸(WIN10怎么设置锁屏时间)

    win10怎么设置gif壁纸(WIN10怎么设置锁屏时间)

  • 苹果x触屏失灵(苹果x触屏失灵一招解决)

    苹果x触屏失灵(苹果x触屏失灵一招解决)

  • 如何关掉carplay仅充电(苹果如何关掉carplay)

    如何关掉carplay仅充电(苹果如何关掉carplay)

  • 达拉斯分水岭, 科罗拉多州西南部 (© Ronda Kimbrow/Shutterstock)(达拉斯位置)

    达拉斯分水岭, 科罗拉多州西南部 (© Ronda Kimbrow/Shutterstock)(达拉斯位置)

  • 印花税计提怎么计提
  • 年终奖可以税前扣除嘛
  • 融资租赁和经营性租赁区别
  • 非财政补助结余分配期末有余额吗
  • 建筑企业购进免税苗木1000元
  • 公司分立是不是法人
  • 白酒出口税收
  • 公司购买的矿泉水属于什么科目
  • 旅行社差额纳税发票怎么开具
  • 未办理土地使用证违反了什么法律
  • 职工福利费为什么是14%
  • 给员工的福利要缴税吗
  • 不得免征和抵扣的税额
  • 向境外企业支付服务费代扣代缴什么税
  • 4S店装修改造费帐务处理?
  • 经营租入的土地使用权 待摊
  • 无法加载响应数据 对于预检请求没有可显示的内容
  • 如何预防计算机病毒的方法
  • 行政事业单位向企业借款违反了什么规定
  • 所得税补税怎么申报
  • rsrcmtr.exe - rsrcmtr是什么进程 有什么用
  • 怎么扣除购入的物品
  • 房地产开发企业增值税怎么算
  • 如何解决php使用延迟问题
  • php日期时间函数
  • 操作系统()
  • Delete `␍` 最简单最有效的解决方法和解释(VScode)
  • 猿类作文
  • 前端实际开发
  • df 命令执行显示不出来
  • 行政事业单位慰问外单位
  • 发票整理归类汇总流程
  • 工伤保险赔偿范围和企业承担范围
  • 企业改制资产整合过程中涉及的土地增值税
  • 营销策划费会计分录
  • 解决掉发的有效方法
  • 采购的技术服务费会计分录
  • 余额百分比法计提坏账准备
  • 工程类企业存货
  • 用友t3系统功能怎么用
  • 跨年认证原材料是什么
  • MicrosoftSQLserver2014可以卸载吗
  • sqlserver2005安装后怎么打开
  • 收到的现金折扣
  • 差旅费退回怎么做账
  • 待抵扣进项税额和待认证进项税额的区别
  • 用友怎么取消月结
  • 建筑业 成本
  • 制作费计入什么费用
  • 厂房测量费怎么做账
  • 投资性房地产的定义
  • 收到赠送样品如何入账
  • 印花税应税凭证是还是否
  • SQLServer:探讨EXEC与sp_executesql的区别详解
  • mysql常用功能
  • win8系统无线网找不到
  • win+tab键
  • win10右下角弹出全屏截图
  • win7系统补丁包
  • windowsxp怎么装windows7
  • win10 20h2 v2
  • win7系统显卡驱动在哪个文件夹
  • win8.1 应用商店是不是不能用了
  • php运行时出现找不到该网页
  • win7如何重装系统电脑
  • c#+unity3d
  • android:ellipsize="marquee"
  • shell中数组如何定义
  • incaseformat查杀
  • 仿真安卓
  • 批处理倒计时30秒内打开文件a,否则30秒后执行文件b
  • jquery中的css方法
  • linux两个版本
  • 济南税务局投诉电话
  • 高铁票抵扣进项能抵扣吗
  • 企业房产税优惠减免政策2020
  • 税务登录 河北省地方税务局
  • vat税怎么做分录
  • 如何鼓励互联网企业发展
  • 律师费不给了会怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设