背景:首页是多场考试【分页请求的数据】,点击进入开始考试页。产品想要的效果:在开始考试页点击返回定位到上次浏览的考试位置。项目框架中未使用第三方keepAlive缓存路由(缓存路由会损失部分数据实时性,要根据项目实际情况酌情使用),另外考试是分页的数据,使用scrollTop定位需要多次定位。
一、实现方式
- keepAlive缓存路由:
- 实现:暂且搁置
- 弊端:借助缓存的Vnode渲染页面,会损失部分数据实时性,要根据项目实际情况酌情使用;
- 优势:无需重新请求数据,无需有定位时滚动的交互,返回就能看到上次浏览的位置;
- scrollTop多次定位:
- 实现:返回定位到上次浏览位置 - scrollTop
- 弊端:借助scrollTop会有滚动的交互,这对用户可能不是很友好;
- 优势:数据是重新请求后端,保证了数据实时性;