什么是钩子函数?
主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
为什么要使用路由的钩子函数?
在路由跳转时,需要一些权限判断或者其他操作。
Vue.beforeEach(function(to, from, next) {
// 在跳转之前执行
})
Vue.afterEach(function(to, from) {
// 在跳转之后执行
})
- to: 即将要进入的目标 路由对象。
- from: 当前导航正要离开的路由。
- next: 调用该方法 resolve 钩子函数(必须调用,否则钩子不会被 resolve),执行结果依赖 next 方法调用参数。
-
next()
进行管道中的下一个钩子。若全部钩子执行完,则导航状态为 confirmed (确认); -
next(false)
中断当前导航。浏览器 url 改变 (可能是用户手动或浏览器后退按钮),此时 url 会重置到 from 路由对应的地址; -
next('/')
next({ path: '/' })
跳转到一个不同地址。中断当前导航,进行一个新的导航; -
next(error)
传入next 参数是一个 error 实例,导航会被终止,该错误会被传递给 router.onError() 注册过的回调。