Vuerouter的beforeEach与afterEach钩子函数的区别

router.beforeEach((to, from, next) => {

  let token = router.app.$storage.fetch("token");

  let needAuth = to.matched.some(item => item.meta.login);

  if(!token && needAuth) return next({path: "/login"});

  next();

}); 

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

var routes = [
  {
  path:'/home',
  component:home,
  name:"home"
  }
]

beforeRouteLeave(to, from, next) {
  next()
},
beforeRouteEnter(to, from, next) {
  next()
},
beforeRouteUpdate(to, from, next) {
  next()
},
data:{},
method: {}

router.beforeEach((to, from, next) => {
//判断登录状态简单实例
var userInfo = window.localStorage.getItem('token');
if (userInfo) {
next();
} else {
next('/login');
}
})

router.beforeEach((to, from, next) => {
var userInfo = window.localStorage.getItem('token');//获取浏览器缓存的用户信息
if(userInfo){ //如果有就直接到首页咯
next();
} else {
if(to.path=='/login'){ //如果是登录页面路径，就直接next()
next();
} else { //不然就跳转到登录；
next('/login');
}

}
})