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

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

var router=new Router({
  routes: [
    {
      path: '/',
      name: 'Chat',
      component: Chat
    }
  ]
});
 
 
1
2
3
4
5
6
7
8
9

router.beforeEach有三个参数：to/from/next

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

router.afterEach有两个参数：to/from

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

2. 单个路由钩子函数beforeEnter
beforeEnter有三个参数：to/from/next

{
      path: '/',
      name: 'Login',
      component: Login,
      beforeEnter: (to, from, next) => {
        console.log("我即将进入login1111111111111");
        next();
      }
    },
 
 
1
2
3
4
5
6
7
8
9

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()
    },
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-df60374684.css" rel="stylesheet">
            </div>

转载自
https://blog.youkuaiyun.com/hellowXDW/article/details/81774304