组件内的守卫

本节目标：理解“组件内的守卫”的核心思路，并能把它用于实际开发或面试表达。 最后，你可以在路由组件内直接定义路由导航守卫(传递给路由配置的)

可用的配置 API 你可以为路由组件添加以下配置： beforeRouteEnter beforeRouteUpdate beforeRouteLeave const UserDetails = { template: ..., beforeRouteEnter(to, from) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 this ！ // 因为当守卫执行时，组件实例还没被创建！ }, beforeRouteUpdate(to, from) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候， // 由于会渲染同样的 UserDetails 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this }, beforeRouteLeave(to, from) { // 在导航离开渲染该组件的对应路由时调用 // 与 beforeRouteUpdate 一样，它可以访问组件实例 this }, }

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 }