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

1. vue-router全局钩子函数
beforeEach和afterEach是vue-router实例对象的属性
特别提醒:每次路由跳转,都会执行beforeEach和afterEach
beforeEach

var router=new Router({
  routes: [
    {
      path: '/',
      name: 'Chat',
      component: Chat
    }
  ]
});

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
beforeEnter有三个参数:to/from/next

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

3.组件内钩子函数
beforeRouteEnter+beforeRouteUpdate+beforeRouteLeave
都有三个参数:to/from/next
beforeRouteEnter:进入这个组建路由之前
beforeRouteLeave:离开这个组建路由
特别注意:
beforeRouteUpdate:再本路由的下级路由切换才会触发beforeRouteUpdate

    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()
    },
  • 3
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值