vue路由钩子函数可以大致分为三类，他们的作用都是主要对路由的跳转进行控制，例如权限管理、登录判断、浏览器判断。
1.全局钩子
主要包括beforeEach和afterEach,
一般有三个参数：
通过beforeEach来对路由跳转做权限管理：
// 设置路由
router.beforeEach((to, from, next) => {
console.log(to, from)
// 跳转前判断是否需要登录
if (to.meta.auto) {
sessionStorage.setItem('success', to.path)
if (store.getters['login/getLogin']) {
next()
} else {
next({ path: 'pleaseLogin' })
}
} else {
next()
}
})
router.beforeEach 页面加载之前
router.afterEach 页面加载之后
2、单个路由里面的钩子
beforeEnter和beforeLeave
beforeEnter: (to, from, next) => {
console.log(to,from,next)
},
beforeLeave: (to, from, next) => {
console.log(to,from,next)
},
3、组件路由
beforeRouteEnter和beforeRouteUpdate,beforeRouteLeave
beforeRouteEnter(to, from, next) {
console.log(to)
},
beforeRouteUpdate(to, from, next) {
console.log(to)
},
beforeRouteLeave(to, from, next) {
console.log(to)
}
532
