H5使用keep-alive进行表单缓存

需求：H5使用keep-alive进行表单缓存，退出表单页面时，缓存表单，再次进入时，询问用户是否完成上一次未完成的表单 弹窗提示是用vant中Dialog组件，需要引入哈！pc端可以用饿了么组件

不说废话直接上代码了，希望大家点赞关注！

路由代码中：

 {
    path: "/formFirstPage", //需要缓存的页面
    name: "formFirstPage",
    component: () => import("../PetAppointment/formFirstPage.vue"),
    meta: {
      keepAlive: true, // 需要缓存
      formData: null, // 缓存的表单数据为空
    },
  },

app中：

<template>
  <div id="app">
    <keep-alive :include="['formFirstPage']">//需要缓存的页面名称，因为我是要缓存多个，用的数组
      <router-view />
    </keep-alive>
  </div>
</template>

需要缓存页面：

 beforeRouteLeave(to, from, next) {//声明keep-alive的生命周期组件
    const onForm = this.myForm;//将表单内容存到路由组件中的meta中
    if (onForm) {
      this.$route.meta.formData = onForm;
      console.log("this.$route.meta.formData", this.$route.meta.formData);
    } else {
      // 否则清空缓存的表单数据
      this.$route.meta.formData = null;
    }
    next();
  },


 created() {  //再页面初始化的时候，获取路由中缓存的数据，去做判断，询问用户是否继续填写
    this.declare();
    const formData = this.$route.meta.formData;
    console.log("formData", formData);
    if (formData) {
      // 如果缓存中存在未完成的表单数据，则提示用户是否继续填写表单
      Dialog.confirm({
        title: "标题",
        message: "是否要继续填写上次未完成的表单？",
      })
        .then(() => {
          this.myForm = formData;
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    
    }
  },

结果：