vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存

场景：查询列表页面输入筛选条件或者改变页码，进入详情页后返回都会刷新页面，不保留内容，所以通过对keep-alive的配置可以实现对筛选条件以及页面的保存

1. 配置路由出口渲染组件

在App.vue文件进行以下配置

// 
<keep-alive v-if="isRouterAlive">
     <router-view class="avue-view" v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view class="avue-view" v-if="!$route.meta.keepAlive" />

// 
data() {
    return {
      isRouterAlive: true,
    };
},

//
provide() {
  return {
    reload: this.reload,
  };
},

//
methods: {
  reload() {
    this.isRouterAlive = false;
    this.$nextTick(() => {
      this.isRouterAlive = true;
    });
  },
}

2.在路由选项中，配置meta属性

{
    path: '/goodsList',
    name: 'GoodsList',
    component: require('@/page/index/goods/GoodsList'),
    meta: {
        keepAlive: true,
    }
},

 3.在列表页添加以下配置

inject: ["reload"],
beforeRouteEnter(to, from, next) {
    if (from.path !== "/see/applicationDetails") {
      next((vm) => {
        vm.reload();
      });
    } else {
      next();
    }
},