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
       }
    })
    }
  • 相关阅读:
    Docker
    内存与缓存
    硬盘和内存的关系
    磁盘和硬盘、软盘
    mysql和redis的区别
    BZOJ 3110 k大数查询 (树套树)
    Codeforces 1303E Erase Subsequences (子序列匹配)
    Codeforces 1304E 1-Trees and Queries (树上距离+思维)(翻译向)
    BZOJ 2161 布娃娃(权值线段树)
    2019icpc徐州现场赛 H Yuuki and a problem (树状数组套主席树)
  • 原文地址:https://www.cnblogs.com/brock/p/11712144.html
Copyright © 2011-2022 走看看