可以在路由组件内直接定义路由导航守卫(传递给路由配置的)
可用的配置 API
beforeRouteEnter
在渲染该组件的对应路由被验证前调用。
此时不能获取组件实例this
,
因为当守卫执行时,组件实例还没被创建!beforeRouteUpdate
在当前路由改变,但是该组件被复用时调用。
举例来说,对于一个带有动态参数的路径/users/:id
,在/users/1
和/users/2
之间跳转的时候,由于会渲染同样的UserDetails
组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例this
。beforeRouteLeave
在导航离开渲染该组件的对应路由时调用。
可以访问组件实例this
。
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {},
beforeRouteUpdate(to, from) {},
beforeRouteLeave(to, from) {},
}
beforeRouteEnter
守卫 不能 访问 this
,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过,可以通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数:
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说,this 已经可用了,所以不支持 传递回调,因为没有必要了。
beforeRouteUpdate (to, from) {
// just use `this`
this.name = to.params.name
}
这个 离开守卫 通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消。
beforeRouteLeave (to, from) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (!answer) return false
}
完整的导航解析流程
官方提供:
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫(2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫(2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter
守卫中传给next
的回调函数,创建好的组件实例会作为回调函数的参数传入。