详解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 相关文章推荐
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jQuery DOM操作实例
Mar 05 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 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
Laravel日志用法详解
2016/10/09 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
pandas DataFrame数据转为list的方法
2018/04/11 Python
python tornado微信开发入门代码
2018/08/24 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
自荐书4要点
2014/01/25 职场文书
食品销售计划书
2014/04/26 职场文书
成立公司计划书
2014/05/07 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
python 网络编程要点总结
2021/06/18 Python