h5路由使用keepalive

最近踩坑踩到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