vue-router钩子函数

vue-router钩子函数

1.全局钩子

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

router.beforeEach

有三个参数：to/from/next

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

router.afterEach

有两个参数：to/from

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

2.单个路由里面的钩子

beforeEnter

有三个参数：to/from/next

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

3.组件路由里面的钩子

beforeRouteEnter

进入这个组建路由之前

beforeRouteUpdate

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

beforeRouteLeave

离开这个组件路由

都有三个参数：to/from/next

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

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

参考
vue-router全局钩子函数+单个路由钩子函数+组件内钩子函数