vue的路由守卫中，在beforeRouteEnter中动态获取路由地址信息之to、from、next & vm的使用

vue的路由守卫中，在beforeRouteEnter中动态获取路由地址信息之to、from、next & vm的使用

场景：

在某个页面文件内（如welcom.vue）用beforeRouteEnter (to, from, next)可以获取前后下的所有路由，在项目开发中经常会用到。比如用来做路由跳转控制、在路由跳转前或后调用方法等。

示例：

在beforeRouteEnter中就判断了该页面前的路由是从哪来的，如果是从首页来的，就直接返回上两页

export default {
  data(){
	return {
		data: {},
	}
  },  
  beforeRouteEnter (to, from, next) {
    if (to.name !== 'Welcome') {
      next({name: 'Index', query: {menu_id: to.params.menuId}})
    }
    else {
      next(vm => {
        vm.getReadyForIndex()
      })
    }
    if (from.name === 'Index') {
      history.go(-2)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

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

实例：

通过构子beforeRouteEnter (to, from, next)可获取当前页面的前后的路由名称
用法：

export default {
   //跳转的路由name
   beforeRouteEnter (to, from, next) {
    // 当守卫执行前，组件实例还没被创建  不能！获取组件实例 `this`
      
    next(vm => {  //vm为vue的实例,相当于this  通过 `vm` 访问组件实例
         // console.log(vm.isPath)
		 // vm.isPath = from.name
		 vm.fullPath=from.name;
         console.log(vm.fullPath )
        
        // 通过 `vm` 访问组件实例,将值传入newPath
        //beforeRouteEnter守卫在导航确认前被调用，因此守卫不能访问 this
        //在template里已经可以用this.newPath来获取到from所带的name值
        vm.newPath = from.name 
	  }); 
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

路由跳转带参

在前一个页面的路由跳转函数里写入一个新的参数，query中分别携带id和path

//跳转对应设备详情页面
deviceInfo(record){
	this.$router.push({name:'detailsDevice', query:{id:record.deviceId,path:'warning'}})
},
1
2
3
4

在所需要获得前页面的url的页面内，通过

v-if="this.$route.query.path === 'warning'"
1

就可以判断所跳转过来的页面是否为特定页面。

• 在执行时，执行顺序是 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

打印效果

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