vue如何在beforeRouterEnter中获取this和操作data或者methods中的数据或方法

<template>
  <div class="home">
    {{ msg }}
    {{ getMsg() }}
  </div>
</template>

<script>
export default {
  name: "Practice",
  data() {
    return {
      msg: "pratice",
    };
  },
  methods: {
    getMsg() {
      return "getMsg" + this.msg;
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    console.log("thisInBeforeRouteEnter", this);
    next((vm) => {
      console.log("thisInBeforeRouteEnterNext", this);
      console.log("vm", vm);
      console.log("dataDataInBeforeRouteEnter  ", vm.msg);
      console.log(vm.getMsg());
    });
  },
  created() {
    console.log("created");
    console.log("thisInCreated", this);
  },
  mounted() {
    console.log("mounted");
    console.log("thisInMounted", this);
  },
  destroyed() {},
};
</script>

在beforeRouteEnter中获取不到this，操作不了data或methods中的数据和方法

执行顺序是beforeRouteEnter---->created---->mounted----->beforeRouterEnter的next(),可以通过给next一个回调，就可以获取像this一样操作数据和调用方法了

打印结果