[JavaScript知识库]熟悉Vue路由的beforeEach陷入死循环的情况

Vue的全局路由分为全局前置路由与全局后置路由

官方对前置路由守卫的介绍

不了解路由守卫的next很容易让页面陷入死循环。

以全局前置路由为例，陷入路由死循环一般报错是堆栈溢出也就是：RangeError: Maximum call stack size exceeded

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    redirect:"/Index"
  },
  {
    path:"/Index",
    component:()=>import('@/views/Index.vue')
  },
  {
    path:"/Center",
    component:()=>import('@/views/Center.vue')
  },
  {
    path:"/an",
    component:()=>import('@/views/an.vue')
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to,from,next)=>{
  console.log("to==>",to);
  console.log("from==>",from);
  if(from.path=='/Index'){
    next('/an')
  }else{
    next();
  }
})

export default router

当从Index.vue离开时就会陷入死循环。

要清楚前置路由陷入死循环的原因,就要明白前置路由守卫的next函数

next函数与beforeEach前置守卫是互相调用的有个过程。
next(‘/’)执行完成后就会执行beforeEach路由守卫

router.beforeEach((to,from,next)=>{
  console.log("to==>",to.path);
  console.log("from==>",from.path);
  if(from.path=='/Index'){
    next('/an')
  }else{
    next();
  }
})

流程解析：刚开始的时候 目标路由是/Center，来源路由是/Index，执行前置路由守卫，判断到if为true,于是执行next(‘/an’)，目标路由改成了/an，但来源路由仍然是/Index，next执行完成后再次执行beforeEach，beforeEach的判断再次为true，再次执行next(‘/an’)，目标路由改成/an，来源路由仍然没变，因为next执行完成后再次执行beforeEach，于是就陷入了死循环。

router.beforeEach((to,from,next)=>{
  console.log("to==>",to.path);
  console.log("from==>",from.path);
  if(to.path=='/Index'){
    next('/Index')
  }else{
    next();
  }
})