zoukankan      html  css  js  c++  java
  • 解决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对于beforeRouteUpdatebeforeRouteLeavethis已经可用,因此不需要传递回调,因此不支持

    完整代码

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

         vm.isShow = true
       }
    })
    }
  • 相关阅读:
    Vue源码探究-数据绑定的实现
    vue 数组遍历方法forEach和map的原理解析和实际应用
    vue 微信内H5调起支付
    uni-app官方教程学习手记
    vue-cli3 搭建的前端项目基础模板
    vue.js响应式原理解析与实现
    vue-waterfall2 基于Vue.js 瀑布流组件
    解决lucene更新删除无效的问题
    spring项目启动报错
    js监听页面copy事件添加版权信息
  • 原文地址:https://www.cnblogs.com/brock/p/11712144.html
Copyright © 2011-2022 走看看