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

  • 腾讯PacewearS8手环续航怎么样(galaxy wearable 腾讯)

    腾讯PacewearS8手环续航怎么样(galaxy wearable 腾讯)

  • 抖音怎么清空点赞列表(抖音怎么清空点赞和收藏)

    抖音怎么清空点赞列表(抖音怎么清空点赞和收藏)

  • 微信在c盘哪个文件夹(微信装在c盘怎么找)

    微信在c盘哪个文件夹(微信装在c盘怎么找)

  • 网易云音乐文件夹在哪(iphone网易云音乐文件)

    网易云音乐文件夹在哪(iphone网易云音乐文件)

  • 怎样知道微信好友把你屏蔽了(怎样知道微信好友在线跟别人聊天?)

    怎样知道微信好友把你屏蔽了(怎样知道微信好友在线跟别人聊天?)

  • win7搜索不到蓝牙鼠标(win7搜索不到蓝牙音箱)

    win7搜索不到蓝牙鼠标(win7搜索不到蓝牙音箱)

  • 按存储器的功能或工作方式可分为(按存储器在计算机中的作用,存储器可分为哪向类)

    按存储器的功能或工作方式可分为(按存储器在计算机中的作用,存储器可分为哪向类)

  • u2机器是什么意思(u2n指的是什么)

    u2机器是什么意思(u2n指的是什么)

  • 充电器插在插座上不拔会有危险吗(充电器插在插座上费电吗)

    充电器插在插座上不拔会有危险吗(充电器插在插座上费电吗)

  • 发出去的微信消息怎样删除对方看不到(发出去的微信消息删除后对方还能看到吗)

    发出去的微信消息怎样删除对方看不到(发出去的微信消息删除后对方还能看到吗)

  • 如何查看美团隐藏号码(如何查看美团隐藏地址)

    如何查看美团隐藏号码(如何查看美团隐藏地址)

  • iphone主题商店在哪里(苹果手机主题商店)

    iphone主题商店在哪里(苹果手机主题商店)

  • 拼多多有购物车功能吗(拼多多有购物车吗在哪里)

    拼多多有购物车功能吗(拼多多有购物车吗在哪里)

  • 手机花呗收款怎么开通(手机花呗怎么收款)

    手机花呗收款怎么开通(手机花呗怎么收款)

  • 小米9pro怎么禁止锁屏时状态栏下拉(小米九怎么禁止软件下载应用)

    小米9pro怎么禁止锁屏时状态栏下拉(小米九怎么禁止软件下载应用)

  • 保靖县属于哪个市(保靖县属于哪个镇)

    保靖县属于哪个市(保靖县属于哪个镇)

  • 小米8se怎么激活电池(小米8激活锁)

    小米8se怎么激活电池(小米8激活锁)

  • 小米4手环怎么刷公交卡(小米4手环怎么和手机绑定)

    小米4手环怎么刷公交卡(小米4手环怎么和手机绑定)

  • word如何检查文档并删除不可见内容(word如何检查文字符合自己规定的内容)

    word如何检查文档并删除不可见内容(word如何检查文字符合自己规定的内容)

  • opporeno有无线充电吗(oppo手机reno无线充电器怎么用)

    opporeno有无线充电吗(oppo手机reno无线充电器怎么用)

  • win11系统开机密码如何取消 Window11系统取消开机密码操作方法(win11系统开机密码设置)

    win11系统开机密码如何取消 Window11系统取消开机密码操作方法(win11系统开机密码设置)

  • 所得税汇算清缴表在哪里打印
  • 品种法,分批法,分步法是什么
  • 公司每年需要交钱吗
  • 个月所得税税率
  • 养老险的基数
  • 购入资产的入账价格一般是以该项资产的什么反应
  • 投资公司的投资人叫什么
  • 以前没有计提增值税吗
  • 幼儿园幼儿买花的通知
  • 企业所得税计入税金及附加科目吗
  • 印花税是不是不用计提
  • 所得税汇算清缴时间期限
  • 增值税发票收款人和复核人可以一个人吗
  • 财付通交易手续费多少
  • 债务重组会计处理中,债务人确认的债务重组利得
  • 外购商誉是资产吗
  • 子公司搭建
  • 讲课费税务发票类别
  • 增值税红字发票是什么意思
  • 应付工资和实付工资的差额叫什么
  • 滞留海关发票是谁开
  • 工会经费什么时候申报缴纳
  • 怎么获得最新医学类指南
  • 小规模开普票后怎么报增值税
  • 公司员工个税怎么交
  • 企业接受股权投资概念政府基金
  • 金融业务增值税税率
  • css如何设置渐变色
  • php管理员和用户登录
  • 无法登陆p.to
  • 提取备用金记账凭证图片
  • php file函数
  • 锁定vlookup快捷键
  • topas命令详解
  • 增值税发票开票系统数据与实际报税数不一致的原因?
  • 应交税费为负数在资产负债表里怎么填
  • discuz mysql8.0
  • mongodb $nin
  • 公司基本户如何注销
  • 企业注销了,存钱怎么办
  • 什么是一般增值税纳税人
  • 记账王怎么打开以前的账套
  • 应补退税额是什么意思 法律
  • 公司收取保证金合法吗
  • 认证发票抵扣有留抵税怎么做分录
  • 退税登记怎么办理
  • 医院收费票据可以入账吗
  • 新公司初期费用全部入哪里
  • 待抵扣税额转入进项税额的分录
  • 税控盘和金税盘一样吗
  • 没有对公业务的银行
  • 生育津贴案件
  • 企业建账的法律规定
  • 工业企业无形资产有哪些
  • sql server复制表数据
  • ubuntu怎么禁用nouveau
  • centos6.8图形界面
  • window10玩英雄联盟卡顿怎么办
  • msswchx.exe - msswchx进程是什么文件 有何作用
  • win7计算机窗口菜单栏
  • windows8.1crazy error
  • perl 比较符
  • pcl读取ply文件
  • cmd常用命令详解
  • opengl learn
  • kindeditor获取内容
  • jquery遍历dom
  • js标志
  • isscroll.js
  • python3.9怎么用
  • 使用jQuery加载html页面到指定的div实现方法
  • 如何用python编写脚本处理数据
  • android sdk在哪下载
  • android系统主要特点
  • 辽宁省国家税务局官网
  • 北京病退流程
  • 安徽税务发票查询入口
  • 教育培训行业的前景
  • 深圳市税务网上注销流程图
  • 7月税务征收期
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设