VUE solves the problem that single-page use keep-alive pages return not refresh

Scenario: A, B, C three pages, A is the home page B is the list page C is the details page

A is refreshed every time B enters page B,

C does not refresh every time it returns to page B. It is still in its original position

The following code configuration

1.app.vue <keep-alive> is Vue's built-in component, which can keep the state in memory during the component switching process to prevent repeated rendering of the DOM.

    <keep-alive> 
      <router-view v-if = "$ route.meta.keepAlive"> </ router-view> 
    </ keep-alive> 
    <!-In addition to cached routes, create a non-cached route The entrance 
    of- > <router-view v-if = "! $ Route.meta.keepAlive"> </ router-view>

2. Configure global keep-alive where routing is configured

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

3. Configure beforeRouterLeave on page B, where the route of funGoodsArea

  // Modify the meta value of the list page, when false enter the page again will request data again. 
  beforeRouteLeave (to, from , next) { 
     from .meta.keepAlive = false ; 
    next (); 
  },

4. Also configured in the C page 

  // Return to the previous page

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

Among them  beforeRouterLeave (to, from, next) {} and methods level