VUE単一ページのビジネス上の問題：キープ・アライブ・コンポーネントのキャッシュページ情報の使用

VUE単一ページのビジネス上の問題：アクセスの詳細ページのページのリストを返し、その後、リストのスクロールバーのページから、情報を検索し、情報をページ情報を保持します。

初めは、メモリページvuex情報であり、後の最終キーはキープアライブするために、この抽象コンポーネントをされ、あまりにも面倒ではなく、GMを発見し、実際にDOMツリーにレンダリングされません。その役割は、（コンポーネントを破壊しない）メモリコンポーネントにキャッシュされ、多くの場合、ルータ・ビューと一緒に表示され、次回のレンダリングまで待つだけでなく、それらを保持し、フック関数をトリガーします。

今、ビジネス上の問題を抽象化、A-> B-> Cは、AとBまたはBのAは、ページキャッシュを必要としない、そしてBは、元のページを維持するために必要とされているページのページBをバックBにC、Cの詳細ページを表示するには、一覧ページですページ情報。

親ページをレンダリングする1.ルーティングが以下に提供されます

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

2がメタVUE-ルータのルートファイル属性で提供され、キープアライブ= trueがページをキャッシュする必要があることを示し

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

3.アセンブリリストページにこのルートbeforeRouterLeaveガードを使用して

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

ます。https：//juejin.im/post/5d023c575188257ff555cbb2で再現