前端vue使用keepAlive: true,，解决页面缓存是否动态刷新的问题（可刷新可不刷新）

项目场景：

我们使用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();
      });
    }
  },