keep-alive實現返回保留篩選條件及篩選結果

實現頁面返回時，保留篩選條件和篩選結果

說明

. keep-alive

是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM

實現

結合router實現部分頁面緩存

模板應用

<keep-alive>
  <router-view v-if="$route.meta && $route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!($route.meta && $route.meta.keepAlive)"></router-view>

route通過meta屬性配置keepAlive控制當前路由頁面是緩存還是非緩存，child表示哪些子頁面返回會緩存上一級的頁面相關數據

{
  name: 'onePage', // onePage
  path: 'onePage',
  component: onePage,
  meta: {
  requiresAuth: true,
  keepAlive: true,
    child: ['/onePage/detail']
  }
}

給被要被緩存的頁面設置beforeRouteLeave,判斷是否清除當前頁的數據,

  beforeRouteLeave(to, from, next) {
      let child = from.meta && from.meta.child || []
      if (child.indexOf(to.path) === -1) {
        // 非子頁面
        this.initData() // 清除data中相關數據
        from.meta.keepAlive = false
      } else {
        // 子頁面
        from.meta.keepAlive = true
      }
      next()
    },
    activated () {
      // 更新查詢列表數據
      this.getList()
    },

詳情頁設置beforeRouteLeave

  beforeRouteLeave (to, from, next) {
    // 設置下一個頁面的路由，讓其列表搜索條件緩存
    if (to.meta) {
      to.meta.keepAlive = true;
      next();
    }
  }