Vue 3 或者 Svelte 中，从无限滚动列表页进入详情页，返回后如何滚动到之前的位置？

[zwdsix]

我最近一直在 Svelte 上尝试写手机端的 web app ，有这么几种方案：

1. 离开列表前，在 sessionStorage 里记录位置，返回时读取位置，滚动到之前保存的位置；

   这种方法有几个问题：首先，每次切换 view 时，之前的 view 实例被销毁，加载新的 view, 然后加载数据。这种情况下，从详情回到列表页，需要知道之前滚动到了第几页。

   而翻页又有起码两种实现方式，一种是往下滚动的时候不停地加载后面的页面，view 上保留着所有页面数据的内容；另一种是无论怎么滚动都只保留前一页、当前页和后一页的 3 页内容。如果用的是第一种方式，那么每次回到列表，都要加载完所有页面，然后再调用 window.scrollTo() 滚动到目标位置。试想想翻了 100 多页的情况，这显然不合理；如果用的是第二种方式，嗯… 实现起来会复杂很多，倒也不是不行。

2. 离开 view 之前不让 view 实例销毁，而是隐藏起来。这样回来之后，自然恢复到原来的状态，但是这种方式需要路由或者框架本身的支持。而且如果离开列表的目标不是去查看详情，而是修改数据，回来之后还得刷新被修改的数据，似乎也不好搞。

想请教一下大家平时都是怎么处理这个问题的？

或者，web app 的开发有其它替代方案来解决这种编辑之后回不到原来位置问题，而不是在这一种方案的实现上死磕？

[makelove]

返回还要重查数据不太合理吧？可以把已查出的列表数据存在全局状态管理里，返回时直接同步渲染出来并定位，用户应该察觉不到页面跳动。
至于状态同步，都用状态管理方案了本地全局状态自然就是和后端同步的。

[VtoEXL]

vue3 中使用 keep-alive ，和配置 vue-router 的 scroll-behavior 达到效果

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

[zwdsix]

@VtoEXL 谢谢。vue3 和 vue-router 的文档我也在看的，keep-alive 这个我知道。但是如果场景是从列表的某一项点进去编辑，保存之后回到刚刚的位置，用 keep-alive 的话，就看不到刚保存的值，还得刷新一下吧？

[VtoEXL]

@zwdsix #3 keep-alive 可以只配置你需要的内容，我的场景是只让列表页 keep-alive 。

[zwdsix]

@VtoEXL 不知道是我没理解你的意思还是你没理解我的意思。我是说当你想编辑列表上的某一项的时候，进入编辑界面，无论是保存还是不保存，退出之后，仍然可以滚动到刚才离开列表时的位置。如果保存了，列表又用了 keep-alive, 那列表上刚刚被修改的那一项数据不就是旧的吗？如果不用 keep-alive, 不就不能回到刚才离开的位置吗？这两个需求用 keep-alive 来实现是冲突的啊。

[VtoEXL]

@zwdsix 如果你有更新的话，你可以在编辑页面更新成功时，通过 event-bus 来通知列表页有更新，更新对应的一项，再返回的话就时新的数据了。

[lynan]

前几年我在用 vue2 的时候，子路由容器是绝对定位在父级路由上层的，所以父级没有被销毁，不需要考虑记录位置的问题，还可以直接修改父级路由数据。