vue中组件导航守卫
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
今天有遇到一个问题,就是在一个页面 新增模块按钮 和 编辑模块按钮 点击之后弹出框都是同一个子组件
在点击保存修改的时候调用的是同一个接口,那后台就找我们沟通说 新增按钮和 编辑功能的按钮 要发两次请求,意思就是把之前发一次请求,现在发两次。
首先拿到这个问题,我看到两个按钮点击之后都是通过this.$router.push 进行跳转的,跳转过去都有携带参数,我就想到了to,from,next 路由导航守卫。我在跳转的时候去传递参数。跳转之后拿到参数,根据参数去判断。
组件内的导航守卫,在组件渲染的时候,进行判断,大概解决思路就是这样的
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。
beforeRouteUpdate (to, from, next) {
// just use `this`
this.name = to.params.name
next()
}
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
beforeRouteLeave (to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
个人理解
在组件内的导航守卫中 ,只有 beforeRouterEnter中的next 才有回调函数,在这个回调函数中可以去操作组件实例,意思就是在这个回调函数中可以去操作data状态
越努力是越幸运,加油,干就完了