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一樣操作數據和調用方法了

打印結果