keepalive缓存刷新页面数据问题

移动端项目中：新增业务的时候有两个需求：一是选择人员；二是选择危险源，这两个都要跳转到其他页面去选择，每次的路由跳转都会刷新页面的数据，所以这个时候需要引入缓存，保存其他已填写的数据，这时候我使用了keepalive来缓存页面

//首先App.vue下添加keepAlive
<div id="app">
    <keep-alive >
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

//其次在路由的配置上添加keepAlive,需要缓存的页面为true
path: '/CheckerPeople', //检查人员选择
name: 'CheckerPeople',
component: () => import('@/views/SecurityCheck/CheckerPeople'),
meta: {
  title: '检查人员选择',
  requiresAuth: false,
  keepAlive: true
 }

这个时候在此新增的页面上的数据，不论跳转去其他页面选择人员还是危险源，跳回来的时候其他输入框、选择器的内容都可以保存。但是这个时候出现另一个问题，当你新增成功的时候，再此点击新增，回到新增页面的时候，发现刚刚的数据还都保留着，退出登录，在此点击新增时数据也在。下面直接上代码解决的方法。

//首先添加v-if,并且写个祖宗方法让其子页面调用v-if销毁创建的方法
<template>
  <div id="app">
    <keep-alive v-if="isRouterAlive">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    }
  }
};
</script>

//在新增页面上，调用此祖宗方法，销毁创建，就可以重新刷新新增页面数据
export default {
    inject: ["reload"],
    beforeRouteEnter(to, from, next) {
    if (from.fullPath === "/SecurityCheck") {
      next(vm => {
        vm.reload();
      });
    } 
  },
}

希望看完这篇文章能解决你们的问题，如有更好的方法解决欢迎评论区讨论