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 的后台的打开行为，就是前端控制模拟堆栈实现的。