最近因为**next()**遇到了不少问题，在这里记录一下

首先是路由守卫，是不是感觉简简单单

beforeEach((to, from, next) => {
	to // 要去的路由
	from // 当前路由
	next() // 放行的意思
}
 

但是在看别的项目时常常能看到next(’/logon’) 、 next(to) 或者 next({ …to, replace: true }) 这又是啥意思呢

其实在路由守卫中，只有next()是放行，其他的诸如：next(’/logon’) 、 next(to) 或者 next({ …to, replace: true })都不是放行，而是：中断当前导航，执行新的导航

可以这么理解：
next() 是放行，但是如果next()里有参数的话，next()就像被重载一样，就有了不同的功能。

而对于上面说的中断当前导航，执行新的导航打个比方：

现在我有一个守卫，在守卫中我使用next(’/logon’)，肯定有同学认为是会直接跳转到/logon路由：

beforeEach((to, from, next) => {
  next('/logon')
}

然而年轻人不讲武德，执行时需要这么看：

beforeEach((to, from, next) => {
  beforeEach(('/logon', from, next) => {
  	 beforeEach(('/logon', from, next) => {
  	 	 beforeEach(('/logon', from, next) => {
  	 	 	beforeEac...  // 一直循环下去...... , 因为我们没有使用 next() 放行
 		}
 	 }
  }
}
 

如果把这个守卫改一下，当我在地址栏输入/home时

beforeEach((to, from, next) => {
   if(to.path === '/home') {
   	next('/logon')
   } else {
    // 如果要去的地方不是 /home ， 就放行
   	next()
   }
}
 

我本来要去/home路由，因此执行了第一次 beforeEach((to, from, next)

但是这个路由守卫中判断了如果要去的地方是’/home’，就执行next(’/logon’)，

所以想要访问/home可以这么看

beforeEach((to, from, next) => {
   beforeEach(('/logon', from, next) => {
     next()  // 现在要去的地方不是 /home ， 因此放行
   }
}

注意：重点就在这，next(’/logon’)不是说直接去/logon路由，而是中断（不是CPU的那个中断！VUE中的中断就是此时不会执行router.afterEach(() => {}）这一次路由守卫的操作，又进入一次路由守卫，就像嵌套一样，一层路由守卫，然后又是一层路由守卫，此时路由守卫进入到第二层时，to.path已经不是/home了，这个时候才执行next()放行操作。

正以为如此很多人在使用动态添加路由addRoutes()会遇到下面的情况：
在addRoutes()之后第一次访问被添加的路由会白屏，这是因为刚刚addRoutes()就立刻访问被添加的路由，然而此时addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。

该如何解决这个问题 ?
此时就要使用next({ …to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。

next({ …to, replace: true })中的replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。

因此next({ …to, replace: true })可以写成next({ …to })，不过你应该不希望用户在addRoutes()还没有完成的时候，可以点击浏览器回退按钮搞事情吧。

其实next({ …to })的执行很简单，它会判断：

如果参数to不能找到对应的路由的话，就再执行一次beforeEach((to, from, next)直到其中的next({ …to})能找到对应的路由为止。

也就是说此时addRoutes()已经完成啦，找到对应的路由之后，接下来将执行前往对应路由的beforeEach((to, from, next) ，因此需要用代码来判断这一次是否就是前往对应路由的beforeEach((to, from, next)，如果是，就执行next()放行。

如果守卫中没有正确的放行出口的话，会一直next({ …to})进入死循环 !!!

因此你还需要确保在当addRoutes()已经完成时，所执行到的这一次beforeEach((to, from, next)中有一个正确的next()方向出口。

因此想实现动态添加路由的操作的话，代码应该是这样的：

router.beforeEach((to, from, next) => {
 const token = sessionStorage.getItem('access_token')
 // 存在 token 说明已经登录
 if (token) {
   // 登录过就不能访问登录界面，需要中断这一次路由守卫，执行下一次路由守卫，并且下一次守卫的to是主页'
   if (to.path === '/login') {
     next({ path: '/' })
   }
   // 保存在store中路由不为空则放行 (如果执行了刷新操作，则 store 里的路由为空，此时需要重新添加路由)
   if (store.getters.getRoutes.length || to.name != null) {
     //放行
     next()
   } else {
     // 将路由添加到 store 中，用来标记已添加动态路由
     store.commit('ADD_ROUTER', '需要添加的路由')
     router.addRoutes('需要添加的路由')
     // 如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
     next({ ...to, replace: true })
   }
 } else {
   // 未登录时，注意 ：在这里也许你的项目不只有 logon 不需要登录 ，register 等其他不需要登录的页面也需要处理
   if (to.path !== '/logon') {
     next({ path: '/logon' })
   } else {
     next()
   }
 }

​ 在使用vue路由守卫的beforeEach方法时可能会出现无限递归，也就是死循环的问题，根本原因在于next()方法在不合适的地方错误调用所致，先来看一下官方对next()方法的解释：

beforeEach方法体：

router.beforeEach((to, from, next) => {
  // ...
})

经过我的测试了一些数据,大概猜测出next()方法的底层实现逻辑(别问为什么不看源码,不会ts,我搞后端的)

经过我的测试,实际上,next()方法的调用是个递归的过程

以下用粗略的js代码来还原next()过程可能发生了什么,有问题请指出:

let router={}
let router.to='xxx'
let router.from='xxx'

//声明next函数
next:function(to,from,_next){
	if(to===undefined){
     //TODO
     
		//相当于beforeEach里面调用next(),也就是放行,return回去,继续执行beforeEach后面的语句
		return;
	}else if(typeof to=='string'){
     //TODO
     
		//相当于beforeEach里面调用next('/string'),此时当前要前往的path被改变了,所以继续调用一层router.beforeEach。对新的path调用路由守卫进行校验,这种情况最容易出现死循环(死递归)
		router.to=to;
		router.beforeEach(router.to,rourer.from,next);
   		//回到上一层beforeEach,继续执行后面的代码
		return;
	}
}

router.beforeEach((to,from,next)=>{
	//程序员TODO
})

router.beforeEach(router.to,rourer.from,next);//路由守卫调用

beforeEach和next是个轮流相互调用的过程,容易造成死循环

这里给出一种无死循环的样例:

router.beforeEach((to,from,next)=>{
    console.log(to.path);
    if(to.path==='/login'){
        console.log(1)
        next();
    }else{
        let user=localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):null;
        if(user){
            console.log(2)
            next();
        }else {
            console.log(3)
            next('/login');
        }
    }
    console.log(4)
})

以下是一些测试样例:

当我未登录,前往'/content'页面时,控制台打印情况:

/content
3
/login
1
4
4

当我未登录,前往'/login'页面时,控制台打印情况:

/login
1
4

综上,尽量别在beforeEach函数内前面调用带参数的next()函数,但也不能一个next()方法都不写.

vue路由守卫中next方法的理解

在网上看到了一篇通俗易懂的文章,此文章出处
在这里我用通俗点的说法解释上next(),next(false),next(’/’),next(error)，希望通过这接地气的解释你能掌握这几个知识点。

背景：你乘坐汽车从A景区想赶往B景区（模拟路由A跳转到路由B）

1.next()

next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。

你乘坐汽车要从A景区到B景区，路过关卡时，守门人拦下你，你量出了next()，守门人一看没问题，赶紧放行，于是你顺利到达了B景区。

2.next(false)

next( false )中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。

如果你量出了next(false)，守门人立马关住大门，不让你走，哪都不让你去，你说想换个交通方式，走路或者坐飞机，都不行，老实待在A景区吧

3.next(’/’)

next( ’ / ‘)或者next({ paht：’ / ’ })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项

你原本打算从A景区到B景区，但是走到关卡的时候由于某些原因改变了主意，想要去C景区，你对守门员量出了next({path:’/C’})，守门员一看，哦，原来你不去B了，要去C啊，去吧去吧，然后你顺利到达了C景区

4.next(error)

next( error )：如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。

你在出发之前，给你妈妈说，妈，要是有什么事我立马通知你，你记得查看消息啊（你注册了router.onError()）走到中途，出现了意外，你发出next(error)，然后你妈就收到了消息，赶紧打电话问你怎么了（执行router.onError()里的回调）

最重要的是自己要吃透文档，如果一遍不懂再看一遍，再不懂就自己写demo去实践.