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)
}
}
}
在 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
});
},
}
路由跳转带参
在前一个页面的路由跳转函数里写入一个新的参数,query中分别携带id和path
//跳转对应设备详情页面
deviceInfo(record){
this.$router.push({name:'detailsDevice', query:{id:record.deviceId,path:'warning'}})
},
在所需要获得前页面的url的页面内,通过
v-if="this.$route.query.path === 'warning'"
就可以判断所跳转过来的页面是否为特定页面。
- 在执行时,执行顺序是
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);
},
},
打印效果
beforeRouteEnter 中的 this 为 underfinded
beforeRouteEnter 中的 vm 和 created,mounted 中打印的this是一样的
beforeRouteEnter 中的 next 是在 created和mounted执行之后才执行的
beforeRouteEnter 中的 vm(可使用其他参数) 可以操作 data 中的数据,也可以操作methods中的函数,且使用方法和 this 一致