这是一个创建于 1084 天前的主题，其中的信息可能已经有所发展或是发生改变。
需求
数据列表，操作栏中有 「查看详情」按钮，点击，如果详情内容不是很多，一般就模态框弹出展示就行了，但有时候也会做成一个页面来展示。所以
处理方式（默认都在当前页 不新开 tab 展示）
1 新页面 新的路由 /list/:id 返回的时候 路由跳转到 /list ，要是直接这么弄的话 返回到列表页 之前的一些操作会丢失，回到第一页。比如我通过搜索项查询到数据，然后点查看详情后，跳到详情页，再返回，我之前的搜索结果页面没了，又得重新去搜索。麻烦， 优化：查看详情前 带上列表页的一些查询条件+页码，返回到列表页时候按这些条件去获取 跳到之前的页（还原到没跳转详情之前的样子）
这种方式就比较明了，页面刷新了 也是加载当前详情
2 写在当前页面 就查看详情的时候，比如页面有个「<d iv class='detail' v-if='detailVisible'>详情内容</di v> 」(可以抽成展示组件)，点击详情的时候出现（绝对定位覆盖到当前页面上），返回的时候直接 detailVisible=false ，隐藏就行了。 这种就不用考虑详情页之前列表的操作的一些状态情况，毕竟都同一个页面，返回时候，列表页还是之前的样子，也不用重新请求数据加载。比较快。
缺点就是：如果展示详情页，刷新会变成列表页，如果是别的地方想跳转到详情页的话 没有上面路由方式方便 需要 /list?id=xxx 这种来判断当前页面是不是要渲染某项的详情
不知道各位一般是怎么处理。
 |
1
murmur 2021-12-10 16:48:04 +08:00  1
我记得 vue 不是带 keep-alive 么
当时我也遇到这个问题 我们是移动端 所以我们重写了路由组件，我们所有历史页面都是 alive 得 不仅可以保存状态，还支持滑动返回，用户看了不喜欢还可以收回去取消导航 |
 |
2
erwin985211 2021-12-10 16:50:38 +08:00
打开新页面也是一种方式
|
 |
3
lifesimple OP @murmur #1 没怎么用过 感谢 我去学习下
|
 |
4
toesbieya 2021-12-10 17:39:53 +08:00
用第一种，搜索页每次条件变化时把条件序列化到 url 的 hash 里，重新进入搜索页时再转换回来
第二种如果是 vue2 的话你不太搞得定 |
 |
5
gouflv 2021-12-10 18:04:06 +08:00 via iPhone
第二种，打开 dialog 的时候往 route append 一个 dialog 相关的参数，也就是持久化在 url 上。
刷新的时候根据参数恢复 dialog |
 |
6
wxsm 2021-12-10 19:00:08 +08:00
keep alive 是其中一种解决方案。另一种方案是，所有数据都储存在状态管理，如 vuex 中，这样后退的话也能从 vuex 中恢复数据，搜索结果什么的，不在话下。当然各种方案都会有优缺点，具体问题再具体分析。
|
Select Language