VUE 解决单页使用keep-alive页面返回不刷新的问题

情景：A、B、C 三个页面 ， A是首页 B是列表页 C是详情页

A每次进入B页面B每次都要刷新，

C每次返回B页面B都不刷新还在原来的位置

下面代码配置

1.app.vue  <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 除了需要缓存的路由 还要创建一个非缓存路由的入口-->
    <router-view v-if="!$route.meta.keepAlive"></router-view>

2.配置路由的地方配置全局keep-alive

{
    path: "/funGoodsArea",
    name: "funGoodsArea",
    component: () => import("../views/activity/funGoodsArea.vue"), 
    meta: {
      title: "text",
      keepAlive: true
    }
  },

3.在B的页面配置 beforeRouterLeave  ,其中funGoodsArea的路由

  //修改列表页的meta值，false时再次进入页面会重新请求数据。
  beforeRouteLeave (to, from, next) { 
    from.meta.keepAlive = false;
    next();
  },

4.同样在C页面中配置 

  // 返回上一页路由不刷新问题

beforeRouteLeave (to, from, next) {
    if (to.path == "/funGoodsArea") {
      to.meta.keepAlive = true;
    } else {
      to.meta.keepAlive = false;
    }
    next();
  },

其中 beforeRouterLeave(to,from,next){}和methods平级的