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

什么是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 死循环 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 中 beforeRouteEnter 死循环的问题

    vue 中 beforeRouteEnter 死循环的问题

    如果在 vue 组件的 beforeRouteEnter 钩子函数中调用 API 请求,会出现循环执行的问题: beforeRouteEnter(to, from, next) { login().then(() => { next({ name: 'home' }); }).catch(() => { next(); }); }, 上面的代码会出现无限循环调用的问题,可能是API还没有请求完成,又一次进入 router,调用了 beforRouterEnter 的原因,解决办法加一个变量,在

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

    什么是beforeEach? beforeEach 是一个vue-router的路由导航钩子,一般我用它做路由守卫. 什么是路由守卫? 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求.对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards).导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧.** 文档地址:https://router.vuejs.org/

  • 详解vue 数据传递的方法

    组件(Component)是 Vue.js 最强大的功能.组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题. 1.父组件向子组件传值 组件实例的作用域是孤立的.这意味着不能在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 子组件: 子组件需要从父组件获取 logo 的值,就需要使用 props: ['logo'] 父组件: 2.子组件向父组件传值 子组件主要通过事件传递数据给父组件. 子组件:

  • 详解Vue注册组件的方法

    目录 简介 说明 官网网址 组件名字 全局注册(一般用于框架) 局部注册(不常用) 模块系统 在模块系统中局部注册(常用) 基础组件的自动化全局注册 简介 说明 本文介绍Vue注册组件的方法. Vue注册组件有这几种:全局注册.局部注册.在模块系统中注册. 官网网址 https://v2.cn.vuejs.org/v2/guide/components-registration.html 组件名字 注册一个组件的时候,需要给它一个名字.比如在全局注册: Vue.component('my-com

  • 详解vue 计算属性与方法跟侦听器区别(面试考点)

    计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于任何复杂逻辑

  • 详解vue引入子组件方法

    前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法. 1.第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2.第二步,例子是在hom.vue界面引入子组件header.vue,如下图 3.第三步,给子组件header.vue命名一个全局的id, export default { name: 'HomeHeader' } 代码如下图 4.第四步,返回home.vue组件,引用header.vue组件代码如下图 HomeHeader 对应

  • 详解vue组件基础

    什么是组件 组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的

  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

随机推荐