前端vue使用keepAlive: true,,解决页面缓存是否动态刷新的问题(可刷新可不刷新)
我们使用vue做项目时,,特别是搜索条件比较多的列表页时,搜索完后进入详情页,再从详情页回到列表页后数据重置,需要重新进行搜索,使用起来特别麻烦不友好。所以比较友好的要求如下 :1、从列表页进入详情页返回列表页时,连页数、筛选条件等都不能变,但是要列表刷新更新为最新的数据2、列表页进数据编辑页再返回时,页数、筛选条件等都不能变,但是需要带条件刷新列表数据3、不是详情页、编辑页进入列表页时,页数、筛
·
项目场景:
我们使用vue做项目时,,特别是搜索条件比较多的列表页时,搜索完后进入详情页,再从详情页回到列表页后数据重置,需要重新进行搜索,使用起来特别麻烦不友好。
所以比较友好的要求如下 :
1、从列表页进入详情页返回列表页时,连页数、筛选条件等都不能变,但是要列表刷新更新为最新的数据
2、列表页进数据编辑页再返回时,页数、筛选条件等都不能变,但是需要带条件刷新列表数据
3、不是详情页、编辑页进入列表页时,页数、筛选条件等都全部重置,列表数据刷新
4、列表页弹窗操作后,也需要带条件进行刷新数据
所以,这个列表页我想让它刷新,它就得刷新;不想让它刷,它就无变化
所以可以使用keep-alive。
但是单纯的keep-alive是前进后退都不会刷新的,所以需要改造一下,让它乖乖听话。这个过程需要路由参数meta配合我们。
下图的多条件查询,假使每次编辑后返回列表页都需要重新输入搜索条件进行重新搜索,会让人崩溃掉。
解决方案:
附代码(主要是理解上面的讲解,下面代码用处不大):
export default [
{
path: 'worksheetsSetting',
name: 'WorksheetsSetting',
meta: {
name: '工单设置',
keepAlive: true,
},
component: () => import('@/components/worksheetsSetting/index.vue'),
},
{
path: 'worksheetsSetting/detail/:id',
name: 'WorksheetsSettingDetail',
meta: {
name: '工单设置详情',
},
component: () => import('@/components/worksheetsSetting/detail.vue'),
},
{
path: 'worksheetsSetting/createNewCategory',
name: 'CreateNewCategory',
meta: {
name: '工单设置新建问题分类',
},
component: () =>
import('@/components/worksheetsSetting/createNewCategory.vue'),
},
{
path: 'worksheetsSetting/editCategory/modify/:id',
name: 'EditCategory',
meta: {
name: '工单设置编辑问题分类',
},
component: () => import('@/components/worksheetsSetting/editCategory.vue'),
},
];
beforeRouteEnter(to, from, next) {
if (from.name == 'WorksheetsSettingDetail' || from.name == 'EditCategory') {
next(vm => {
vm.doSearch();
});
} else {
next(vm => {
vm.doResetParams();
});
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)