小白VUE学习笔记1：Vue:router的beforeEach与afterEach钩子函数

在路由跳转的时候，有时候需要一些权限判断或者其他操作。这时需要使用路由的钩子函数。

定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

总体来讲vue.router里面提供了三大类钩子，两种函数
1、全局钩子
2、某个路由的钩子
3、组件内钩子

两种函数：

1、Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/

2.Vue.afterEach(function(to,form))/在跳转之后判断/

1、 全局钩子函数

router.beforeEach((to, from, next) => {
 
  if (to.path === '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  if (!user && to.path !== '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

/***
*1、to:router即将进入的路由对象
*2、from:当前导航即将离开的路由
*3、next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed ；否则为false，终止导航
***/

//afterEach()可以不传next()函数
router.afterEach((to, from) => {
    //console.log('router after each');
});

2、某个路由的钩子

它是写在某个路由里头的函数

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

3、组件内的钩子

了解还不多，没使用过，待更新…
可以查阅看看官方文档