详解vue beforeEach 死循环问题解决方法


Posted in Javascript onFebruary 25, 2020

什么是beforeEach?

beforeEach 是一个vue-router的路由导航钩子,一般我用它做路由守卫。

什么是路由守卫?

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。**

文档地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

举个例子,当我们没有登录的时候,跳转到登录页面。如果登录了,则正常跳转。

下面我们来看下死循环代码。

export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    next({path: '/p404'})
  }
});

当 token 不存在于 session 中,跳转到 /p404,此时路由改变,再次进行判断,则又跳转到 /404,由此造成了死循环。在代码中进行一次判断,如果跳到 p404了,就让它安心的进路由吧。修改后代码如下。

export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    if (to.path == '/p404') {
      next();
    } else {
      next({path: '/p404'})
    }
  }
});

到此这篇关于详解vue beforeEach 死循环问题解决方法的文章就介绍到这了,更多相关vue beforeEach 死循环 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
js+css3制作时钟特效
Oct 16 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue实现简单加法计算器
Oct 22 Javascript
Vue实现简易计算器
Feb 25 #Javascript
js+canvas实现简单扫雷小游戏
Jan 22 #Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 #Javascript
es6中let和const的使用方法详解
Feb 24 #Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
JS数组扁平化、去重、排序操作实例详解
Feb 24 #Javascript
You might like
php实现可逆加密的方法
2015/08/11 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
图片自动更新(说明)
2006/10/02 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python使用str & repr转换字符串
2016/10/13 Python
简述Python2与Python3的不同点
2018/01/21 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
python中判断文件结束符的具体方法
2020/08/04 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
sql server 累计求和实现代码
2022/02/28 SQL Server