keep-alive实现返回保留筛选条件及筛选结果

Posted 2021-03-21 goddess

实现页面返回时，保留筛选条件和筛选结果

说明

. 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();
    }
  }