解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this

问题描述

vue框架，只有在报名页面报名成功，然后自动跳转到订单详情，才弹出一个引流弹窗，其他情况均不弹出，我就想到使用vue

的组件内前置守卫beforeRouteEnter来实现。beforeRouteEnter （to,from,next）的参数to，from可以确认当前路由对象和上一

个路由对象，但是遇到了一个问题。beforeRouteEnter 无法获取上下文this实例，这就很尴尬了。

问题解析

beforeRouteEnter (to,from,next) {

　　//在确认呈现此组件的路由之前调用。

　　//无权访问“this”组件实例，

　　//因为调用这个守卫时还没有创建！

}

在beforeRouteEnter时，页面还没有渲染，新进入组件还没有被创建，无法获取this实例

解决方法

可以通过向传递回调来访问实例next。确认导航后，将调用该回调，并将组件实例作为参数传递给回调：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过“vm”访问组件实例`
　　//可以通过vm.name去访问data里面的name属性，跟this.name一样效果
  })
}

请注意，这beforeRouteEnter是唯一支持将回调传递给的保护措施next。对于beforeRouteUpdate和beforeRouteLeave，this已经可用，因此不需要传递回调，因此不支持：

完整代码

beforeRouteEnter (to, from, next) {
  next(vm => {
    　if(from.meta.title == '报名页面'） {
　　　　　//判断是否从报名页面过来，如果是显示弹窗
　　　　　vm.isShow = true
　　　}
  })
}