vue-router路由拦截造成死循环

笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.

router的index.js文件路由配置

const router = new Router({
routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}},{path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"},children: [{ path: 'home', name: 'home', component: () => import('@/views/Hmoe'),meta: { title: "首页" } }],}]
})

一开始路由拦截是这样写的,但是这样的结果就是，在token存在的时候，可以直接访问login页面，但是实际项目中是，在token存在的时候不能可以访问login页面

router.beforeEach((to, from, next) => {if (!to.meta.isShow && !sessionStorage.getItem("token")) {return next('/login');}next();
})

根据项目的需求进行修改，然后就出现下图的报错,出现了死循环

router.beforeEach((to, from, next) => {if (sessionStorage.getItem("token")) {if (to.meta.isShow) {next('/home')} else {next()}} else {next('/login');}
})//检查代码
router.beforeEach((to, from, next) => {if (sessionStorage.getItem("token")) {if (to.meta.isShow) {console.log("1")next('/home')} else {console.log("2")next()}} else {console.log("3")next('/login');}
})

然后接着进行修改，就把浏览器弄崩溃了，此处省略一万字T_T.......

最后修改的代码,终于得到了最终的需要的结果

router.beforeEach((to, from, next) => {if (sessionStorage.getItem('token')) {//toekn存在if (to.path == '/login') {//token存在，并且是login页面next('/home');} else {//token存在，不是login页面next();}} else {if (to.path == '/login') {//token不存在，并且是login页面next();} else {//token不存在，不是login页面next('/login');}}
});

关于vue-router导航守卫，官方给出的解释是

出现无限循环是因为之前我没有弄清楚next()流程
因为每次跳转到一个路由的时候都会触发全局守卫由于判断条件未改变所以一直循环

关于上面代码我自己的理解，就是当token存在的时候，判断页面是否是login页面，如果是就next到首页，不是就直接next。如果token不存在，页面为login就直接next，不是login就直接next到login页面，因为一开始在第一个else里面没有做判断，那么他的条件一直未改变，所以他会一直重复next到login才造成的死循环，后面写了判断之后就正常了......................................

vue-router路由拦截造成死循环相关推荐

Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue+axios（interceptors）实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果...
axios interceptors 拦截器 //interceptors.js// vue axios配置发起请求加载loading请求结束关闭loading // http request 请求 ...
Vue | Vue Router 路由的使用
文章目录一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...

vue-router路由拦截造成死循环

vue-router路由拦截造成死循环相关推荐

最新文章

热门文章