router.beforeEach(async (to, from, next) => {
if (token) {
if (whiteList.indexOf(to.path) != -1) {
next()
} else {
next('404')
}
} else {
console.log('test')
next('404')
}
})

上述实例中在没有token的情况下出现无限循环

原因分析:

在设置路由拦截的时候当指向另一个地址的时候还会触发一次路由拦截,既每次地址栏的变化都会触发一次路由拦截,在没有token值的时候会一直向404跳转,所以会出现无限循环的情况

需要在进行跳转的时候有一个满足跳转条件的来阻止跳转带来的路由拦截

router.beforeEach(async (to, from, next) => {
if (token) {
if (whiteList.indexOf(to.path) != -1) {
next()
} else {
next('404')
}
} else {
if (to.path === '/404') {
next()
} else {
console.log('test')
next('404')
}
}
})

在上述代码中加入一个404,在每次进入路由拦截的时候就会定向到404来终止地址的跳转,这样就防止了无限循环

vue中路由拦截无限循环的情况的更多相关文章

  1. vue-router(转)——基本使用 + 路由守卫无限循环问题

    路由守卫无限循环问题 https://www.jianshu.com/p/1187f8f74a72 学习目的 学习Vue的必备技能,必须 熟练使用 Vue-router,能够在实际项目中运用. Vue ...

  2. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  3. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  4. Vue中路由的使用

    在Vue中动态挂载组件 首先需要安装  cnpm install vue-router --save 在main.js中引入VueRouter 并使用 定义一个路由 创建router实例 通过rout ...

  5. Vue中实现一个无限加载列表

    参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...

  6. 对于vue中axios拦截器简单封装

    axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if ( ...

  7. vue中路由返回上一个页面,恢复到上一个页面的滚动位置

    第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...

  8. vue中路由

    关于每次点击链接都要刷新页面的问题众所周知,开发单页应用就是因为那丝般顺滑的体验效果,如果每次点击都会刷新页面… 出现这个的原因是因为使用了window.location来跳转,只需要使用使用rout ...

  9. vue中路由传值url--路径传值

    在vue项目中我们使用路径的方式一般有一下两种方式this.$route.params.userId;一种需要在router上配置对应的数据key, this.$route.query.userId;

随机推荐

  1. 代码审计-数组返回NULL绕过

    <?php $flag = "flag"; if (isset ($_GET['password'])) { if (ereg ("^[a-zA-Z0-9]+$&q ...

  2. Spring Boot应用启动器

    SpringBoot应用启动器基本的一共有44种,具体如下: 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. 2)spring-b ...

  3. oracle 行转列~列转行(几种方法)

    工作中,我们经常会碰到行转列的情况 这里我介绍几种简单的方法--行转列 1.oracle的pivot函数 原表 使用pivot函数: with temp as(select '四川省' nation ...

  4. opencv局限:cv::FileStorage读取中,xml文件的第一层节点不能超过4个

    今天测试发现一个问题,cv::FileStorage读取中,xml文件的第一层节点不能超过4个. <?xml version="1.0"?> <opencv_st ...

  5. koa2中的ctx是什么?

    为了试图搞明白,用console.log将它输出 const Koa = require('koa'); const app = new Koa(); app.use(ctx => { ctx. ...

  6. pycharm配置mysql数据库连接访问

    如图,这是打开后的默认界面.找到界面的“Data base”选项并点击. 这里可以看到当前项目配置的数据库,如果为空,表示未配置数据库.我们可以点击上方“+”号来配置,点击“+”号.在下拉框中我们选择 ...

  7. Codeforces Round #604 (Div. 2) D、E、F题解

    Beautiful Sequence Beautiful Mirrors Beautiful Bracket Sequence (easy version) Beautiful Sequence \[ ...

  8. MyEclipse一直building workspace

    点击Project,点击Bulid Automatically去掉其前面的勾,即取消自动编译工作空间中的所有java文件. 注:不要取消!!!!取消之后如果你修改的java文件和struts.xml等 ...

  9. 【转】jsp 页面 按回车键 触发事件

    转载: https://blog.csdn.net/ludongshun2016/article/details/59536779. 第一种: <script type="text/J ...

  10. [LeetCode] 834. Sum of Distances in Tree 树中距离之和

    An undirected, connected tree with N nodes labelled 0...N-1 and N-1 edges are given. The ith edge co ...