用 Vue 写列表页/详情页 的一个常见的需求，大神们都是如何解决的？

[wuhaoworld]

比如一个管理后台，列表页展示所有文章，包括标题、作者、发布时间等。 点击文章标题进入详情页，可以对文章进行编辑，可以编辑后返回列表页，也可以直接返回列表页。

因为文章列表很长，从文章详情页返回列表页需要保持其滚动条位置，还有其他组件的状态，所以对列表页设置了 keep-alive 。

如果不做其他控制对话，修改 /删除文章后，返回列表页，刚刚编辑的文章还是以原来的名称显示，并没有更新。

网上看到一种方案，是说一旦编辑或修改，再返回列表页时，在 beforeRouteLeave 回调中，让列表页的 keep-alive 设为 fasle，但这样整个列表页都被刷新了，之前的状态并没被保留，我期望即使文章被编辑后，返回列表还能保留之前的滚动条位置以及其他组件的状态，同时列表页显示最新的文章标题及内容。

暂没有用 Vuex，大家是如何解决这个问题的？

[xingyue]

tabs，列表一个 tab，详情 /编辑一个 tab

[renmu123]

编辑后在列表的 list 中找到被编辑文章的 id，然后修改该文章的 name

[Midnight]

调后端修改接口时后端返回修改后的内容，直接更新状态就好了

[aaronlam]

返回后调用接口更新指定那条被更新的记录不就好啦？

[ZhangZisu]

详情页用 Vue router 子路由，列表 router view 为父组件，传入正在编辑的对象；编辑组件 props 双向绑定。

[lblblong]

建议编辑和详情用 Dialog，在 Dialog 关闭时触发列表项的局部更新，可以用 Promise 连接 Dialog，这样代码非常清晰：

```typescript
const res = await Dialog.open({
el: UserDetailDialog,
props: { id: row.id }
})

Object.assign( row, res )
```

[wuhaoworld]

@renmu123 @aaronlam @aaronlam 目前是这么做的，编辑后在 localStorage 记录操作对象 ID 和动作（删除或修改），返回列表时更新被编辑对象的详情，因为实体类型很多，比如有文章、用户、分类等等，总感觉这个方法不是很好

[alphat]

https://github.com/hezhongfeng/vue-page-stack

https://github.com/zack24q/vue-navigation

[renmu123]

@wuhaoworld 我是觉得这个需求不常见，大部分都是 50 条数据分页，更新后直接刷新了

[xiaoliaoliao]

可以试试我写的 vu-query，更改商品名称后通过更新请求列表的缓存实现。

[xiaoliaoliao]

@xiaoliaoliao 而且也不需要使用 keep alive 去缓存页面了，vu-query 提供了开箱即用的请求数据缓存及滚动恢复

[nianyu]

详情页编辑删除返回到列表页重现刷新，那这时候有新增的文章，岂不是看不到了

[xu2060]

可以在详情页判断用户是否编辑，如果编辑了离开的时候在 beforeRouteLeave 的回调里面把更新完的标题传回列表页。（传回列表页如果没有父子关系，可以用 EventBus 传，如果是父子组件就用 this.$emit()鉴于现在没有 Vuex ）这时候列表页的 data 里面保存了离开列表页时的滚动条位置。这样状态保持了，标题也更新了。

[KouShuiYu]

array.splice(编辑的 index,1,编辑后的);

[letwewell]

返回保证之前的滚动条位置 数据还要更新 。 假设返回后数据新增了几十条 滚动条位置应该变吗？

[aools]

deactivated 时记录滚动位置，activated 时重新请求数据并调整滚动条位置

[sjhhjx0122]

用 extends 封装个服务式的 drawer，用 promise 包裹，close 方法 resolve，然后把 close 方法传递给子组件，子组件逻辑结束触发 close 方法，父页面就能拿到回调了

drawer(child,params).then()

[darknoll]

返回的时候计算滚动条位置

[CokeMine]

OnActivated 钩子重新请求数据

[gzf6]

project 提供一个更新的方法，编辑后请求一次