解决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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
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+ajax实现图片文件上传功能实例
2014/06/17 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
javascript学习之闭包分析
2010/12/02 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
简单的js计算器实现
2016/10/26 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
浅谈Angular4中常用管道
2017/09/27 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
React组件refs的使用详解
2018/02/09 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python中cPickle类使用方法详解
2018/08/27 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
Linux常见面试题
2016/10/04 面试题
运动会广播稿500字
2014/01/28 职场文书
农民工讨薪标语
2014/06/26 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python