vue中keepAlive页面缓存，详情页返回列表页刷新问题

问题当我们从列表页面的第二页进入某一项的详情页后再从详情页返回列表页，此时列表页会刷新回第一页用户体验极差需要的效果返回时仍要回到之前保存的好的页数和筛选条件等解决需要缓存的页面则添加keepAlive，不需要缓存的页面则不加路由<keep-alive><router-view v-...

寒枫

6663人浏览 · 2020-04-26 17:41:12

寒枫 · 2020-04-26 17:41:12 发布

问题

当我们从列表页面的第二页进入某一项的详情页后
在这里插入图片描述
再从详情页返回列表页，此时列表页会刷新回第一页

用户体验极差

需要的效果

返回时仍要回到之前保存的好的页数和筛选条件等
在这里插入图片描述

解决

需要缓存的页面则添加keepAlive，不需要缓存的页面则不加

路由

	<!-- 缓存的页面 -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <!-- 不缓存的页面 -->
      <router-view v-if="!$route.meta.keepAlive" />

在路由配置中添加
router.js
在这里插入图片描述

新问题？？？

此时又遇到了新的问题
我修改 “没钱的员工” 名称
在这里插入图片描述
改为 ”很有钱的员工“

修改完成返回列表页时，列表中的数据已经被缓存了没有改变，

新问题？？？解决

keep-alive有两个钩子
在这里插入图片描述

使用activated
因为keep-alive会缓存页面上的数据，其中包括页数、筛选条件等，
so，可以在activated中调用api请求数据

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^