vue之路由守卫

一、路由守卫用来干啥

在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化

二、路由守卫实现方式

//通过路由钩子绑定事件

全局路由钩子：

//进入到某个路由组件之前
router.beforeEach((to, from, next) => {
	//会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log('beforeEach')
  console.log(to,from)
  next()
})

//进入到某个路由组件之后
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('afterEach')
})

单个路由钩子：

只有beforeEnter，在进入前执行，to参数就是当前路由

 routes: [
    {
      path: '/foo',
      component: Foo,
      //当进入到foo路由之前，就会触发
      beforeEnter: (to, from, next) => {
        // ...
        next() //必须要执行next之后，对应的Foo组件才可以正常显示出来
      }
    }
  ]

路由组件钩子：

  //进入到某个组件之前的拦截，获取不到组件内部的this
  beforeRouteEn