vue3 中从列表页->详情页->返回之前的列表页较好的实现逻辑

[herozzm]

比如我在列表页的第三页，然后进入详情页查看，然后（ back 操作或者跳转到之前列表第三页），如果不做额外处理的话列表页就成了第一页（或者返回的时候列表页会刷新，比如点击项的着色就消失了），你们是如何处理这个逻辑的？我是尝试将进入详情页之前的列表页做了缓存处理，但是感觉还是不好用

虽然是一个很普遍的操作应用，我硬是没找到合适的方法实现

[tog]

@herozzm 什么叫飘红

[Great233]

https://codesandbox.io/p/devbox/serene-varahamihira-vvk9qr?file=%2Fsrc%2Frouter%2Findex.ts%3A10%2C15

试了下 keepalive 可以实现，没啥问题啊

[Ma4cus]

实在不行用 vuex pinia 这种全局状态管理存一下

[fcfangcc]

@herozzm 那可能你写的 menu .active 的逻辑有问题吧。我试了下我这里的，详情返回列表是秒高亮列表的那个 menu 行的

[fcfangcc]

@herozzm 忽略 24 ，我看错问题描述了。但是你说的这个应该是实现的问题

[corcre]

v-show/最大化 dialog 展示+1
点击的着色项或者滚动到页面哪个位置这些数据你没保存的话怎么复现得出来, 就算复现出来了需要重新渲染好像不可避免的会出现白屏/骨架屏诸如此类的画面, 特别是弱网条件下

[dj721xHiAvbL11n0]

他确实不应该有问题，不行你就用 pinia 保存你点击的 id

[ZnductR0MjHvjRQ3]

最差最差 v-show

[sjhhjx0122]

一般分页搜索条件我都是存在 url 上,具体可以看看 https://vueuse.org/core/useUrlSearchParams/#useurlsearchparams

[jy02534655]

@herozzm 现在我用 vue3,基于 keep-alive 缓存页面是没这个问题的，一个列表勾选一项后切换到其他页面在返回勾选状态是会保存的
vue2 的话应该也不会有这个问题，估计是你缓存机制没做对，你用 vue 的调试工具看看是不是同一个页面在 vue 中出现了多个，按理说缓存固定页面是不会有这种问题的，又不是缓存多个详情页

[Track13]

页数和点击的哪行的 id 都放路由里

[yrj]

简单说一下我之前的做法，就是 keep-alive ＋判断来源确定是否刷新。