路由守卫中使用next()跳转到指定路径时会无限循环

路由守卫钩子介绍

const router = new VueRouter({ ... })
// 导航路由变化时触发路由守卫钩子
router.beforeEach((to, from, next) => {
  // ...
})

• to: Route:  即将要进入的目标路由对象(到哪去)
• from: Route: 当前导航正要离开的路由(从哪来)
• next: Function(必须）:  resolve 钩子(学过promise的应该知道),执行效果依赖 next 方法的调用参数，有参和无参数含义不同。(放行到哪)
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (意思就是确认放行)。
  • next(false):中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址 (从哪来的回哪里去)
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址(放行到哪个地方)。当前的导航被中断，然后进行一个新的导航(结束当前钩子函数，重新运行钩子函数)。 它允许你传递一个路由对象，其中可以包含更多的配置选项，比如 path、name、params、query 等

注意：

①next('/') 或者 next({ path: '/' })效果是一样的后者是前者的简写，一般是放行到根路径下(router中可配置根路径)

②next({})的参数中国农还可以包含更多的配置选项比如 path、name、params、query 等

// 带查询参数
next({ path: '/', query: { userId: 123 } })

// 或者使用命名路由和路由参数
next({ name: 'user', params: { userId: 123 } })

③to的path内如果是个 '/'表示之前的路由是根路径或者没有上一个路由。

错误案例

记录造成跳转路径无限循环案例：

举例1：

// 下面的写法会死循环
beforeRoute (to, from, next) {
    console.log('离开路路由')
    next('/home')
}

// 正确写法
beforeRoute (to, from, next) {
   console.log('离开路路由')
   if(to.fullPath==='/home'){
      next();
      return;
   }else{
      next('/home')
}

解释：

vue-router的next()方法无参和有参时是不一样的

比如当 to.path=/a时，遇到了next("/home")时

①会中断当前 to /a 的这当前导航

②将 to.path改为"/home"即(/a 改为 /home)

③此时重新触发钩子函数beforeRouteLeave(从头重新执行)

钩子函数中return作用

router.beforeEach ((to,from,next) => {
  //将所有需要登陆才显示的页面的路由都放进一个数组
  const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
  //获取登陆状态
  let isLogin = Global.isLogin
 
  if(to.name === 'login') {  //如果是登录页，则跳过验证
    next()  //必不可少
    return  //以下的代码不执行
  }
  if(nextRoute.indexOf(to.name) >= 0) {  //判断该页面是否需要登陆
    if(!isLogin) {   //判断登陆状态
      next({ name : 'login'})   //如果未登录，则跳转到登录页
    } else {
      next()  //如果已经登陆，那就可以跳转
    }
  } else {  //其他的无需登陆的页面不做验证
      next()
  }
   
})

这里的return 起的作用:  

首先要知道return 在一个函数中遇到会立刻中断函数执行将return后的内容作为函数的返回值(return后的代码不在执行--这个不解释了很基础)

to.name === 'login'为真时，意味着用户正在尝试访问登录页面。在这种情况下，我们不需要进行任何进一步的检查，因此我们调用next()来继续路由导航，并通过return语句立即结束beforeEach函数的执行。

如果不使用return，代码将会继续执行后续的条件检查，这是不必要的，因为我们已经决定允许用户访问登录页面。即  如果不加return 下面代码还是会执行

if(nextRoute.indexOf(to.name) >= 0) {  //判断该页面是否需要登陆
  // ... 省略了其他代码 ...
}