keep-alive結合vuex實現特定頁面的前進刷新，後退不刷新

  相似需求：作到前進刷新數據,後退不刷新數據呢?
  有需求在微信h5頁面中，底部有四個tab首頁、視頻、訂單列表、個人，實現進入這三個頁面二級頁面（即產品詳情、視頻詳情、訂單詳情）後，後退是緩存的組件，不須要再請求數據，但tab間的切換是須要從新請求的。
  網上實現相似需求：
  https://blog.csdn.net/leileib...
  https://www.jianshu.com/p/0b0...
  https://juejin.im/post/5a6989...
  https://segmentfault.com/a/11...
  網上大部分使用增長 router.meta 屬性的方法

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 這裏是會被緩存的視圖組件 -->
    </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
    <!-- 這裏是不被緩存的視圖組件-->
</router-view>

  這種方法在本次場景中會有各類奇怪的問題出現，點擊底部tab切換，及進入詳情屢次操做後，緩存會失效。在實驗中嘗試在組件導航守衛裏添加一些判斷，來銷燬不需緩存的上個組件，但一樣會致使緩存失效。
  需求解決：使用keep-alive中的include結合vuex、beforeRouteLeave在首頁、視頻、訂單三個組件作特定判斷。
  部分代碼：

//includecomponents使用vuex
<keep-alive :include='includecomponents'>
    <router-view></router-view>
</keep-alive>

  三個頁面：

beforeRouteLeave(to, from, next) {
      if (to.path == "/orderdetail") {
          //進入三個頁面的二級頁面，緩存的是三個組件
          let arr = ['home','videos','order']
          this.includearr(arr)
      } else {
          //tab間切換，不緩存當前組件
          let arr = ['home','videos']
          this.includearr(arr)
      }
      next();
},