1、全局钩子
router.beforeEach、router.afterEach:每次每一个路由改变的时候都得执行一遍,beforeEach页面加载之前执行,afterEach页面加载之后执行。
应用场景:可进行一些页面跳转前处理,例如判断需要登录的页面进行拦截,做登录跳转!!
router.beforeEach((to, from, next) => {})
2、路由内钩子
beforeEnter
let router = new Router({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {}
}
]
3、组件内钩子
beforeRouteEnter:钩子执行前,组件实例还没被创建
beforeRouteUpdate:在当前路由改变,但该组件被复用时调用
beforeRouteLeave:导航离开该组件的对应路由时调用
应用场景:清除当前组件中的定时器、当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转