vue-router钩子函数和执行顺序

vue-router钩子函数

全局路由钩子函数

每次路由跳转，都会执行beforeEach和afterEach
beforeEach和afterEach是vue-router实例对象的属性

router.beforeEach：

router.beforeEach(function (to,from,next) {
  console.log(to);//到达的路由
  console.log(next);//管道中，可以跳转到其他路由
  console.log(from);//离开的路由
  next();
})

router.afterEach：

router.afterEach(function (to,from) {
  console.log(to);//到达的路由
  console.log(from);//离开的路由
})

路由独享守卫钩子

beforeEnter：

{
      path: '/',
      name: 'Login',
      component: Login,
      beforeEnter: (to, from, next) => {
        console.log("我即将进入login页");
        next();
      }
    },

组件路由里面的钩子

beforeRouteEnter：

进入这个组建路由之前

beforeRouteUpdate：

再本路由的下级路由切换才会触发beforeRouteUpdate

beforeRouteLeave：

离开这个组件路由

methods:{
      success:function(){
        this.$router.push({ path: '/login' });
      },
    },
    computed:{

    },
    beforeRouteEnter:function(to,from,next){
      console.log("进入这个组件");
      next()
    },
    beforeRouteUpdate:function(to,from,next){
      console.log("在二级导航里面切换了");
      next()
    },
    beforeRouteLeave:function(to,from,next){
      console.log("离开这个组件更新");
      next()
    },