关于 vue 如何在beforeRouteEnter中获取 this 和操作 data 中的数据

在 vue 项目中，经常需要通过判断从不同的页面进入，显示不同的内容，beforeRouteEnter非常好判断从哪个路由进去，但在这里面因为获取不到this，操作不了 data 中的数据，即使我们知道是从哪个路由进入，也没法对他进行差异化的操作。

在官方文档中，beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用
不能获取组件实例 this
因为当前守卫执行前，组件实例还没被创建。

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },

官方也提供了方法，就是可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

在执行时，执行顺序是 beforeRouteEnter → created → mounted →beforeRouteEnter的next。通过给next传一个回调，就可以获取像this一样操作data中的数据，也可以执行函数等。

data() {
	return {
		dataData: "dataData",
	};
},
computed: {},
watch: {},
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.dataData);
		vm.functionA("fromNext");
	});
},
created() {
	console.log("created");
	console.log("thisInCreated", this);
},
mounted() {
	console.log("mounted");
	console.log("thisInMounted", this);
},
destroyed() {},
methods: {
	functionA(param) {
		console.log("fnA", param);
	},},

这是打印结果

可以看出：

1. beforeRouteEnter 中的 this 为 underfinded
2. beforeRouteEnter 中的 vm 和 created，mounted 中打印的this是一样的
3. beforeRouteEnter 中的 next 是在 created和mounted执行之后才执行的
4. beforeRouteEnter 中的 vm(可使用其他参数) 可以操作 data 中的数据，也可以操作methods中的函数，且使用方法和 this 一致

如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。