vue-cli学习-组件内守卫

路由独享守卫

路由独享守卫：即在某个路由内设置，仅供这个路由进行设置

    {
        path: '/',
        name: 'Home',
        component: Home,
        //路由独享守卫
        beforeEnter : (to,form,next)=>{
            console.log(to)
            console.log(form)
            next()
        }
    }

组件内守卫

组件内的守卫有三个：beforeRouteEnter(Update、Leave)，写在组件区

<script>
    export default {
      beforeRouteEnter(to,from,next){
        console.log("组件被激活。。。"+this)
        next()
      },
      beforeRouteLeave(to,from,next) {
        console.log("离开组件。。。"+this)
        next()
      },
      beforeRouteUpdate(to,from,next) {
        console.log("组件被复用::id。。。"+this)
        next()
      }
    }
</scrip>

在激活前触发的是无法得到 this 组件实例的，因为还没被创建，可以回调获取

    next(vm => {
          console.log(vm)
        })

新版本 2.5+还提供了：beforeResolve()，基本类似,但执行顺序有变化，具体参考手册