vue 在beforeRouteEnter中获取 this 和操作 data 中的数据

返回上一个页面

1.$router.back()
2.$router.go()
1
2

区别点在于：

go(-1): 原页面表单中的内容会丢失；

this.$router.go(-1)：后退+刷新；
this.$router.go(0)：刷新；
this.$router.go(1) ：前进
1
2
3
4

back(): 原页表表单中的内容会保留；在返回界面传递参数；

this.$router.back():后退 ；
this.$router.back(0) 刷新；
this.$router.back(1)：前进
1
2
3

this.$router.back()在返回界面传递参数

点击按钮，返回上一个页面

this.$route.params.user = "123";
this.$router.back();
1
2

然后在上一个页面，在 beforeRouteEnter 中可获取参数

  beforeRouteEnter(to, from, next) {
   
   let user = from.params.user;
    
    next();
  }
1
2
3
4
5
6
7

beforeRouteEnter非常好判断从哪个路由进去，但在这里面因为获取不到this，操作不了 data 中的数据，即使我们知道是从哪个路由进入，也没法对他进行差异化的操作.
官方也提供了方法，就是可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

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

1
2
3
4
5
6

在执行时，执行顺序是 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32