解决vue-router路由拦截造成死循环问题


Posted in Javascript onAugust 05, 2020

笔记:vue-router路由拦截造成死循环,在做路由拦截的时候,一直出现死循环.

router的index.js文件路由配置

const router = new Router({
routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}},
    {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"},
    children: [{ path: 'home', name: 'home', component: () => import('@/views/Hmoe'),
    meta: { title: "首页" } }],}]
})

一开始路由拦截是这样写的,但是这样的结果就是,在token存在的时候,可以直接访问login页面,但是实际项目中是,在token存在的时候不能可以访问login页面

router.beforeEach((to, from, next) => {
 if (!to.meta.isShow && !sessionStorage.getItem("token")) {
  return next('/login');
 }
 next();
})

根据项目的需求进行修改,然后就出现下图的报错,出现了死循环

router.beforeEach((to, from, next) => {
 if (sessionStorage.getItem("token")) {
  if (to.meta.isShow) {
   next('/home')
  } else {
   next()
  }
 } else {
  next('/login');
 }
})
 
//检查代码
router.beforeEach((to, from, next) => {
 if (sessionStorage.getItem("token")) {
  if (to.meta.isShow) {
   console.log("1")
   next('/home')
  } else {
   console.log("2")
 
   next()
  }
 } else {
  console.log("3")
  next('/login');
 }
})

解决vue-router路由拦截造成死循环问题

解决vue-router路由拦截造成死循环问题

然后接着进行修改,就把浏览器弄崩溃了,此处省略一万字T_T.......

最后修改的代码,终于得到了最终的需要的结果

router.beforeEach((to, from, next) => {
 if (sessionStorage.getItem('token')) {//toekn存在
  if (to.path == '/login') {//token存在,并且是login页面
   next('/home');
  } else {//token存在,不是login页面
   next();
  }
 } else {
  if (to.path == '/login') {//token不存在,并且是login页面
   next();
  } else {//token不存在,不是login页面
   next('/login');
  }
 }
});

关于vue-router导航守卫,官方给出的解释是

解决vue-router路由拦截造成死循环问题

出现无限循环是因为之前我没有弄清楚next()流程

因为每次跳转到一个路由的时候都会 触发 全局守卫 由于判断条件未改变 所以 一直循环

关于上面代码我自己的理解,就是当token存在的时候,判断页面是否是login页面,如果是就next到首页,不是就直接next。如果token不存在,页面为login就直接next,不是login就直接next到login页面,因为一开始在第一个else里面没有做判断,那么他的条件一直未改变,所以他会一直重复next到login才造成的死循环,后面写了判断之后就正常了....

补充知识:vue-router promise问题

最近在项目中使用element发现了一个bug

侧边栏list 点击没问题 如果在这个点击页面 在点击一次router-link 就会报错 但是不影响功能

去你引用vue-router的页面添加一段代码

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}

以上这篇解决vue-router路由拦截造成死循环问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 #Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 #Javascript
解决vue路由name同名,路由重复的问题
Aug 05 #Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 #Javascript
Vue 同步异步存值取值实现案例
Aug 05 #Javascript
详解vue路由
Aug 05 #Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 #Javascript
You might like
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
javascript prototype 原型链
2009/03/12 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Django import export实现数据库导入导出方式
2020/04/03 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
职务任命书范本
2014/06/05 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
上课说话检讨书
2015/01/27 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
开除员工通知
2015/04/22 职场文书
义卖募捐活动总结
2015/05/09 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
MySQL注入基础练习
2021/05/30 MySQL
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
基于Python实现一个春节倒计时脚本
2022/01/22 Python