vue中beforeRouterEnter使用vm配置data无效

在页面中很多地方会使用组件路由守卫进行控制页面权限，同时也会在守卫中通过vm进行一系列操作，但是你会发现很多时候你通过vm设置的data无效（延迟赋值），那是因为执行顺序是：beforeRouteEnter => created => mounted => beforeRouteEnter的next() , 导致你在next()中做的赋值操作是在组件初始化之后才产生，这很不方便。

  beforeRouteEnter: (to, from, next) => {

    let url = window.location.search;

    var loc = url.substring(url.lastIndexOf("=") + 1, url.length);

    next((vm) => {

      vm.self_data = loc    //延迟赋值

    });

  },

如上写next方法中的逻辑便会出现这种问题

那么，该如何解决呢？

 通过在vm中传递一个初始化方法，将本在原组件的mounted或者created钩子中调用的方法绑定在next，code如下：

  beforeRouteEnter: (to, from, next) => {

    let url = window.location.search;

    var loc = url.substring(url.lastIndexOf("=") + 1, url.length);

    next((vm) => {

      vm.judgeAccess(loc);

    });

  },

methods:{

judgeAccess(loc){

  this.self_data = loc

  this.getData()

}

}

亲测有效！ 码字不易，点个赞呗。