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

[herozzm]

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

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

[konnnnn]

global store cache last params

[ChefIsAwesome]

/page/3

[jy02534655]

缓存为啥不好用？我用起来没问题呀

[herozzm]

@ChefIsAwesome 点击项的着色会消失，方便让编辑的人知道他刚刚看的那一条消息

[herozzm]

@jy02534655 我用的是路由缓存，返回的时候会先刷一下然后回复到之前的状态，有闪动，不丝滑

[renmu]

用缓存的问题就是用户可能同时打开多个列表页，或者详情页里有操作列表页的方法。
要么就使用传统的分页

[shizhibuyu2023]

有闪动就加个 transition 咯
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
<component :is="Component">

[hanaTsuk1]

翻页的时候把页数加到路由上，后退的时候自然是之前的
“点击项的着色就消失了”是啥意思？ a 标签的已经打开过链接的效果？是的话，把详情页的链接写成 a 标签，有个:visited 的伪类看一下
别用缓存没必要

[NerbraskaGuy]

最简单就是不做路由跳转了用 v-show 控制，或者更通用方法是详情页打开新标签页

[LDa]

详情页弹窗

[fcfangcc]

列表页 keepalive 就行了

[tog]

1 、v-show ， 弹窗详情都不靠谱
2 、这种 keep-alive 就行

[herozzm]

@hanaTsuk1 并不是，在打开详情页前会标记你打开的项，一般是飘红，让操作者得知我刚才到底看的哪一条，伪类会将所有浏览记录标记，我需要的是最后一项标记

[herozzm]

@fcfangcc
@tog 缓存太重了 会闪不好用

[herozzm]

@tog
@fcfangcc 说错了 keeplive 不好用，跳下详情页前，我将点击项飘红了，然后从详情页回来列表页最开始中并未有飘红项，要 0.5s 后才会飘红项，不知道背后逻辑，赶紧挺很傻

[webbillion]

@herozzm #15 keep-alive 足够使用了，不知道你所说的点击项着色是:active 还是自己另外实现的效果，你想的效果是微信聊天列表选择联系人进入聊天详情再回来的时候联系人有灰色背景，过一会再消失那样？那就需要你多写一点代码控制了。

[herozzm]

@webbillion 自己增加的效果

[Laobai]

新增，修改，详情页容器内最大化 Dialog

[PhonRT]

全屏弹窗

[Chad0000]

op 可以研究一下 azure 的后台的打开行为，就是前端控制模拟堆栈实现的。

[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 ＋判断来源确定是否刷新。