问题

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

需要的效果

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

解决

需要缓存的页面则添加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请求数据

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue