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平級的