vue single-page business problem: the use of keep-alive component cache page information

vue single-page business issues: access details page returns a list of pages, then keep the page information, search for information, the information from the list scroll bar page.

The beginning is information vuex memory page, later found too much trouble, not GM, the final key is to keep-alive this abstract component, will not actually be rendered in the DOM tree. Its role is cached in memory components (not to destroy components), wait until the next time rendering, but also hold them, and will trigger hook function, often appear together with the router-view.

Now the business problem abstract, A-> B-> C, A to B or B to A does not need the page cache, and B is a list page to view the details page to C, C to B back page page B is required to keep the original page page information.

1. Routing render the parent page is provided below

<!-- 需要页面缓存 -->
<keep-alive>
 	  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <!-- 不需要页面缓存 -->
 <router-view v-if="!$route.meta.keepAlive"></router-view>
复制代码

2 is provided at the root file attributes in the meta vue-router, keepAlive = true indicates that the page needs to be cached

  {
        path: '/mini',
        component: orderMini,
        name:'allMiniOrders',
        //添加meta
        meta: {
          keepAlive: true
        }
   },
复制代码

3. Using this route beforeRouterLeave guard in the assembly list page

 beforeRouteLeave(to, from, next) {
 	  //to: Route: 即将要进入的目标 路由对象
      //from: Route: 当前导航正要离开的路由
      //next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 	  //当我们要去的页面不是详情页时
      if(to.name!=='orderMiniDetails'){
      //将当前页面的keepAlive设为false,表示现在这个页面不需要缓存了
        from.meta.keepAlive=false;
      }
      next();
  },
复制代码

Reproduced in: https: //juejin.im/post/5d023c575188257ff555cbb2