详解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 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
DIV始终居中的js代码
Feb 17 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
Jun 17 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
discuz的php防止sql注入函数
2011/01/17 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
numpy自动生成数组详解
2017/12/15 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python爬取淘宝商品销量信息
2018/11/16 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
pygame实现五子棋游戏
2019/10/29 Python
python文件读取失败怎么处理
2020/06/23 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
个人求职信范文分享
2014/01/31 职场文书
护士求职自荐信范文
2014/03/19 职场文书
机械专业技术员求职信
2014/06/14 职场文书
2014年化验员工作总结
2014/11/18 职场文书
经费申请报告
2015/05/15 职场文书
公司处罚决定书
2015/06/24 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技