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

 更新时间:2020年02月25日 08:37:25   作者:新绿儿茶味  
这篇文章主要介绍了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 死循环 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

原文链接:https://segmentfault.com/a/1190000021820349

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue中v-text / v-html使用实例代码详解

    vue中v-text / v-html使用实例代码详解

    这篇文章主要介绍了vue中v-text / v-html使用实例代码详解,非常不错,代码简单易懂,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vscode配置vue下的es6规范自动格式化详解

    vscode配置vue下的es6规范自动格式化详解

    这篇文章主要介绍了vscode配置vue下的es6规范自动格式化详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue中的路由传值与重调本路由改变参数

    vue中的路由传值与重调本路由改变参数

    这篇文章主要介绍了vue中的路由传值与重调本路由改变参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 利用nginx部署vue项目的全过程

    利用nginx部署vue项目的全过程

    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来,下面这篇文章主要给大家介绍了关于利用nginx部署vue项目的相关资料,需要的朋友可以参考下
    2022-03-03
  • webstorm建立vue-cli脚手架的傻瓜式教程

    webstorm建立vue-cli脚手架的傻瓜式教程

    这篇文章主要给大家介绍了关于webstorm建立vue-cli脚手架的傻瓜式教程,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解,感兴趣的朋友一起看看吧
    2016-11-11
  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 。这篇文章主要介绍了在Vue项目中使用WebUploader实现文件上传,需要的朋友可以参考下
    2019-07-07
  • 图文详解vue框架安装步骤

    图文详解vue框架安装步骤

    我们在本篇内容里给大家整理了关于vue框架安装的步骤以及需要注意的地方,有需要的朋友们学习下。
    2019-02-02
  • vue移动端项目中如何实现页面缓存的示例代码

    vue移动端项目中如何实现页面缓存的示例代码

    这篇文章主要介绍了vue移动端项目中如何实现页面缓存的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vuejs实现带样式的单文件组件新方法

    Vuejs实现带样式的单文件组件新方法

    这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论