vue-路由守卫

• 正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，有多种机会植入路由导航过程中：全局的，单个路由独享的或者组件级的。
• 记住参数或查询的改变并不会触发进入/离开的导航守卫。可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdata的组件内守卫。
• 全局前置守卫：可以使用router.beforeEach注册一个全局前置守卫：

// 全局守卫
router.beforeEach((to, from, next) => {
  console.log(to)
  if (to.path === '/center') {
    console.log('盘查')
    if (auth.isLogin()) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

//判断登录否
const auth = {
  isLogin () {
    return true // true放行，false进入login
  }
}

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。

• 每个守卫方法接收三个参数：

• to:Route：即将要进入的目标（路由对象）

• from:Route：当前导航正要离开的路由

• next:Functiion：一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed（确认的）。

• ****局部守卫：组件内的守卫，可以在路由组件内直接定义一下路由导航守卫：

• beforRouteEnter(to,from,next){}：在渲染该组件的对应路由被confirm前调用，不能获取组件实例this。因为当守卫执行前，组件实例还没被创建。

• beforeRouteUpdate(to,from,next){}：在当前路由改变，但是该组件被复用时调用，可以访问组件实例this。

• beforeRouteLeave(to,from,next){}：导航离开该组件的对应路由时调用，可以访问组件实例this。

<!--局部守卫-->
<script>
const auth = {
  isLogin () {
    return false // true放行，false进入login
  }
}
export default {
  beforeRouteEnter (to, from, next) {
    console.log('局部盘查')
    if (auth.isLogin()) {
      next()
    } else {
      next('/Login')
    }
  }
}