Nuxt.js中使用keep-alive进行页面缓存相关汇总

前言：在Nuxt.js实际的项目开发过程中可能会遇到各种的使用需求场景，其中很多还是后台管理系统的会比较多，并且多数以分页表格的形式展示数据。主要解决从表格进入详情再返回表格当前数据不变化。

Nuxt.js的官方使用

针对根目录的layouts文件下配置

<template>
  <div>
    <Nuxt keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- will be converted into something like this -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

针对page下配置

<template>
  <div>
    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- will be converted into something like this -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

管理系统效果

keep-alive使用无效的解决办法

说明：实际项目中可能由于各种原因keep-alive并不能解决进入详情再返回列表，列表数据并没有得到缓存，可通过以下得到解决。通过组件路由钩子函数处理

1. 在路由配置列表主表格界面路由给meta增加两个参数

  {
    path: 'modelList',
    component: dynamicWarp(() => import('@/pages/coupon/modelList')),
    name: 'modelList',
    meta: {
      title: 'couponModelList',
      auths: 'cardManagement.maintain',
      keepData: {}, // 需要缓存的数据参数，
      refresh: false, // 是否做刷新处理
    },
  },

2. 在主表格路由组件添加离开路由对data的值进行缓存

　beforeRouteLeave(to, from, next){
   this.$router.from.meta.keepData = {...this._data}; //把当前data的需求缓存在meta的keepData中
　  next();
　}

3. 主表格路由组件页面对路由进来进行判断是否使用缓存值

  beforeRouteEnter(to, from, next) {
    if (
      to.name === 'modelList' &&   //to为当前的路由信息
      (from.name === 'couponDetail' ||
        from.name === 'couponUnShelf' ||
        from.name === 'couponShelf' ||
        from.name === 'couponAdd' ||
        from.name === 'couponUpdate' ||
        from.name === 'couponDiscard')  //from为前一个路由信息，这是需要做缓存的路由名称
    ) {
      to.meta.refresh = true;
    } else {
      to.meta.refresh = false;
    }
    next();
  },

4. 在created或者mounted进行数据处理时，判断当前路由是否做刷新而更改请求参数

   生命周期钩子函数使用created使用

 created() {
    const { paging, form, modelTypeVal } = this.$route.meta.keepData;
    if (this.$route.meta.refresh) {
      let parmas = {
        ...paging,
        ...form,
        departmentId: form.departmentId,
        status: form.status,
        type: form.type,
        modelTypeVal,
      };
      this.queryBtn(parmas); //主表格存在是否需要刷新处理，包括搜索条件的赋值
    } else {
      this.queryBtn();
    }
  },

页面组件data包含的参数信息

  data() {
    return {
      ownerDepart: {}, // 所属机构
      rechargeShow: false, // 电子现金劵充值弹窗
      recordShow: false, // 变更记录弹窗
      currentRowData: {}, // 当前选中行的值
      tableLoading: false,
      modelTypeVal: undefined, // 模型类型下拉列表的值
      allTypes: {}, // 从模型类型下拉列表数据中过滤出类型
      typeProps: {
        value: 'id',
        label: 'typeName',
        children: 'childList',
        checkStrictly: true,
      },
      typeOptions: [],
      statusOptions: this.$route.name === 'couponDrafts' ? STATUS_DRAFTS : STATUS,
      // 查询表单
      form: { status: statusAll, departmentId: null, couponTitle: undefined },
      // 分页数据
      total: 0,
      paging: {
        pageIndex: 1,
        pageSize: 10,
      },
      // 表格数据
      tableData: [],
      isDrafs: this.$route.name === 'couponDrafts', // 是否是个人草稿箱
    };
  },

查询按钮的事件判断

  queryBtn(val) {
  //val['pageIndex']是为了给返回当前路由再次点击查询，val会为event时间做判断依据
    if (this.$route.meta.refresh && val['pageIndex']) {  
      this.query(val);
    } else {
      this.query();
    }
  },

请求参数处理

  queryBtn(val) {
  //val['pageIndex']是为了给返回当前路由再次点击查询，val会为event时间做判断依据
    if (this.$route.meta.refresh && val['pageIndex']) {  
      this.query(val);
    } else {
      this.query();
    }
  },

请求接口的事件处理
if条件下的赋值非常重要！！！数据最好为更改后的接口数据，因为详情或者其他界面可以进行数据处理

  async query(val) {
  //if else是为了判断是详情或者其他界面进入还是首次进入主表格界面
    if (val && Object.keys(val).length > 0 && val['pageIndex']) {
      const { couponTitle, departmentId, modelTypeVal, status, type } = val;
      delete val.modelTypeVal;
      let parmas = val;
      if (parmas['status'] === 1010) delete parmas.status;
      this.tableLoading = true;
      const result = await modelList(parmas).finally(() => {
        this.tableLoading = false;
      });
      const { data, total } = result;
      this.paging = {  //为分页的赋值处理
        pageIndex: val.pageIndex,
        pageSize: val.pageSize,
      };
      this.form = { couponTitle, departmentId, status, type };   //为搜索条件的赋值处理
      this.modelTypeVal = modelTypeVal;
      this.total = total;  //为请求接口之后的数据
      this.tableData = data;  //为请求接口之后的数据
    } else {
      const { type, status, departmentId, couponTitle } = this.form;
      const params = {
        ...this.paging,
        departmentId,
        type,
        couponTitle,
      };
      const { id } = this.ownerDepart;
      if (departmentId === null && id !== DEPART_TZ) {
        params.departmentId = `0,${id}`;
      }
      // 模型状态如果不是全部
      if (status !== statusAll) Object.assign(params, { status });
      if (this.isDrafs) {
        Object.assign(params, { userId: this.$store.getters.uid });
      }
      this.tableLoading = true;
      const { data, currentPage, total } = await (this.isDrafs ? draftList : modelList)(
        params,
      ).finally(() => {
        this.tableLoading = false;
      });
      this.tableData = data;
      this.total = total;
      this.paging.pageIndex = currentPage;
    }
  },

总结：遇到问题不用急，沉下心总会有解决的办法。共勉
如有错误/不足，烦请斧正。