前言:在Nuxt.js实际的项目开发过程中可能会遇到各种的使用需求场景,其中很多还是后台管理系统的会比较多,并且多数以分页表格的形式展示数据。主要解决从表格进入详情再返回表格当前数据不变化。
keep-alive的使用说明
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并不能解决进入详情再返回列表,列表数据并没有得到缓存,可通过以下得到解决。通过组件路由钩子函数处理
- 在路由配置列表主表格界面路由给meta增加两个参数
{
path: 'modelList',
component: dynamicWarp(() => import('@/pages/coupon/modelList')),
name: 'modelList',
meta: {
title: 'couponModelList',
auths: 'cardManagement.maintain',
keepData: {}, // 需要缓存的数据参数,
refresh: false, // 是否做刷新处理
},
},
- 在主表格路由组件添加离开路由对data的值进行缓存
beforeRouteLeave(to, from, next){
this.$router.from.meta.keepData = {...this._data}; //把当前data的需求缓存在meta的keepData中
next();
}
- 主表格路由组件页面对路由进来进行判断是否使用缓存值
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();
},
-
在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;
}
},
总结:遇到问题不用急,沉下心总会有解决的办法。共勉
如有错误/不足,烦请斧正。