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

Myth丶恋晨 2024-02-21 09:25 37阅读 0赞

#### 返回上一个页面 ####

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

#### 区别点在于： ####

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

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

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

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

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

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

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

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

beforeRouteEnter(to, from, next) {
        
       
       let user = from.params.user;
        
        next();
      }

beforeRouteEnter非常好判断从哪个路由进去，但在这里面因为获取不到this，操作不了 data 中的数据，即使我们知道是从哪个路由进入，也没法对他进行差异化的操作.  
官方也提供了方法，就是可以通过传一个回调给 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);
    	},},