V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lifesimple
V2EX  ›  问与答

前端 查看详情页的处理方式,求问

  •  
  •   lifesimple · 2021-12-10 16:44:19 +08:00 · 1165 次点击
    这是一个创建于 1077 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求

    数据列表,操作栏中有 「查看详情」按钮,点击,如果详情内容不是很多,一般就模态框弹出展示就行了,但有时候也会做成一个页面来展示。所以

    处理方式(默认都在当前页 不新开 tab 展示)

    1 新页面 新的路由 /list/:id 返回的时候 路由跳转到 /list ,要是直接这么弄的话 返回到列表页 之前的一些操作会丢失,回到第一页。比如我通过搜索项查询到数据,然后点查看详情后,跳到详情页,再返回,我之前的搜索结果页面没了,又得重新去搜索。麻烦, 优化:查看详情前 带上列表页的一些查询条件+页码,返回到列表页时候按这些条件去获取 跳到之前的页(还原到没跳转详情之前的样子)

    这种方式就比较明了,页面刷新了 也是加载当前详情

    2 写在当前页面 就查看详情的时候,比如页面有个「<d iv class='detail' v-if='detailVisible'>详情内容</di v> 」(可以抽成展示组件),点击详情的时候出现(绝对定位覆盖到当前页面上),返回的时候直接 detailVisible=false ,隐藏就行了。 这种就不用考虑详情页之前列表的操作的一些状态情况,毕竟都同一个页面,返回时候,列表页还是之前的样子,也不用重新请求数据加载。比较快。

    缺点就是:如果展示详情页,刷新会变成列表页,如果是别的地方想跳转到详情页的话 没有上面路由方式方便 需要 /list?id=xxx 这种来判断当前页面是不是要渲染某项的详情

    不知道各位一般是怎么处理。

    6 条回复    2021-12-10 19:00:08 +08:00
    murmur
        1
    murmur  
       2021-12-10 16:48:04 +08:00   ❤️ 1
    我记得 vue 不是带 keep-alive 么

    当时我也遇到这个问题

    我们是移动端

    所以我们重写了路由组件,我们所有历史页面都是 alive 得

    不仅可以保存状态,还支持滑动返回,用户看了不喜欢还可以收回去取消导航
    erwin985211
        2
    erwin985211  
       2021-12-10 16:50:38 +08:00
    打开新页面也是一种方式
    lifesimple
        3
    lifesimple  
    OP
       2021-12-10 16:57:55 +08:00
    @murmur #1 没怎么用过 感谢 我去学习下
    toesbieya
        4
    toesbieya  
       2021-12-10 17:39:53 +08:00
    用第一种,搜索页每次条件变化时把条件序列化到 url 的 hash 里,重新进入搜索页时再转换回来
    第二种如果是 vue2 的话你不太搞得定
    gouflv
        5
    gouflv  
       2021-12-10 18:04:06 +08:00 via iPhone
    第二种,打开 dialog 的时候往 route append 一个 dialog 相关的参数,也就是持久化在 url 上。
    刷新的时候根据参数恢复 dialog
    wxsm
        6
    wxsm  
       2021-12-10 19:00:08 +08:00
    keep alive 是其中一种解决方案。另一种方案是,所有数据都储存在状态管理,如 vuex 中,这样后退的话也能从 vuex 中恢复数据,搜索结果什么的,不在话下。当然各种方案都会有优缺点,具体问题再具体分析。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3523 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 00:50 · PVG 08:50 · LAX 16:50 · JFK 19:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.