最近踩坑踩到keepalive了
keepalive作用：缓存组件内部状态，避免重新渲染
换句话来说，当这个A页面跳转至B页面再通过this.$router.replace进入A页面时，不会进入mounted生命周期
可我需要从B页面url携带参数返回A页面，怎么办呢？
路由守卫的钩子函数!!!
beforeRouteEnter(to, from, next) {
console.log(this, 'beforeRouteEnter'); // undefined
console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
next(vm => {
//因为当钩子执行前，组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
console.log(vm);//当前组件的实例
});
}
页面实战中应用如下
beforeRouteEnter(to, from, next) {
// 当前路由keepalive
next((vm) => {
vm.data = to.query ? to.query : vm.data;
console.log('vm.data', vm.data);
vm.communityUuid = String(vm.data.communityUuid);
if (vm.data.phone) {
vm.phoneValue = String(vm.data.phone);
}
if (vm.data.communityName) {
vm.communityName = decodeURIComponent(vm.data.communityName);
}
// 从房屋二维码过来的，housesAddress直接赋值，并且记录方式
vm.typeCheck = vm.data.housesAddress ? 'fwewm' : '';
if (vm.typeCheck === 'fwewm') {
vm.housesAddress = decodeURIComponent(vm.data.housesAddress);
vm.housesUuid = vm.data.houseUuid;
}
});
}
最后真机调试显示的是这样
image.png
