vue的路由守卫 容易理解 （必看~~~）

vue路由守卫有三种，分别为：

1. 全局守卫
2. 路由独享守卫
3. 组件内的守卫

一、全局守卫 常用的是：

1. 路由的前置守卫

 *  路由的前置守卫 router.beforeEach((to,from,next)=>{
 *      to -- 去哪里
 *      from -- 从哪里来
 *      next -- 下一步 （放不放行）
 *
 *  })
 *
 *  后置钩子函数  router.afterEach((to,from)=>{
 *
 *  })

接下来是用路由前置守卫实现登录的例子：

router.beforeEach((to,from,next)=>{
  // console.log('1',to,from ,next)
  //   console.log(store)
    // state.loginData是自己模拟的数据 
    // 如果没有数据并且不再登录页就跳回登录页
    if(!store.state.loginData && to.name!='login'){
        next('/login')
        return
    }
    // 如果有数据并且再登录页就进入首页
    if(store.state.loginData && to.name=='login'){
      next('/')
        return
    }
    next()
})

注：如果出现报错：
maximum call stack size exceeded 堆栈溢出 死循环

2.后置钩子函数

// router.afterEach((to,from,next)=>{
//   console.log(to)
//   console.log(from)
//   console.log(next) //没有
// })

注：后置钩子函数没有next

二、组件级的守卫

在页面中和data同级

路由进入之前
beforeRouteEnter((to,from,next){
    进入路由前什么也没触发
    所以在写的时候注意可不可以进入这个路由
	如果不可以就 next()
})
路由更新
beforeRouteUpdate((to,from,next){
    路由更新页面不变时触发
})
路由离开
beforeRouteLeave
//路由离开时触发

三、单个路由守卫

是在配置路由的地方写的，和component、name或path同一级

beforeEnter((to,from,next)=>{
    进入路由前什么也不触发
	在写的时候注意可不可以进入这个路由
	如果不可以就 next()
})