说明

. keep-alive

实现

结合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>
{
  name: 'onePage', // onePage
  path: 'onePage',
  component: onePage,
  meta: {
  requiresAuth: true,
  keepAlive: true,
    child: ['/onePage/detail']
  }
}
  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 (to, from, next) {
    // 设置下一个页面的路由,让其列表搜索条件缓存
    if (to.meta) {
      to.meta.keepAlive = true;
      next();
    }
  }
02-11 18:16
查看更多