比如一个管理后台,列表页展示所有文章,包括标题、作者、发布时间等。 点击文章标题进入详情页,可以对文章进行编辑,可以编辑后返回列表页,也可以直接返回列表页。
因为文章列表很长,从文章详情页返回列表页需要保持其滚动条位置,还有其他组件的状态,所以对列表页设置了 keep-alive 。
如果不做其他控制对话,修改 /删除文章后,返回列表页,刚刚编辑的文章还是以原来的名称显示,并没有更新。
网上看到一种方案,是说一旦编辑或修改,再返回列表页时,在 beforeRouteLeave 回调中,让列表页的 keep-alive 设为 fasle,但这样整个列表页都被刷新了,之前的状态并没被保留,我期望即使文章被编辑后,返回列表还能保留之前的滚动条位置以及其他组件的状态,同时列表页显示最新的文章标题及内容。
暂没有用 Vuex,大家是如何解决这个问题的?
1
xingyue 2021-05-23 14:29:34 +08:00 via Android
tabs,列表一个 tab,详情 /编辑一个 tab
|
2
renmu123 2021-05-23 14:37:01 +08:00 via Android 1
编辑后在列表的 list 中找到被编辑文章的 id,然后修改该文章的 name
|
3
Midnight 2021-05-23 15:28:51 +08:00
调后端修改接口时后端返回修改后的内容,直接更新状态就好了
|
4
aaronlam 2021-05-23 15:59:00 +08:00
返回后调用接口更新指定那条被更新的记录不就好啦?
|
5
ZhangZisu 2021-05-23 16:43:27 +08:00
详情页用 Vue router 子路由,列表 router view 为父组件,传入正在编辑的对象;编辑组件 props 双向绑定。
|
6
lblblong 2021-05-23 16:49:46 +08:00
建议编辑和详情用 Dialog,在 Dialog 关闭时触发列表项的局部更新,可以用 Promise 连接 Dialog,这样代码非常清晰:
```typescript const res = await Dialog.open({ el: UserDetailDialog, props: { id: row.id } }) Object.assign( row, res ) ``` |
7
wuhaoworld OP |
8
alphat 2021-05-23 17:31:09 +08:00
|
9
renmu123 2021-05-23 18:19:32 +08:00 via Android
@wuhaoworld 我是觉得这个需求不常见,大部分都是 50 条数据分页,更新后直接刷新了
|
10
xiaoliaoliao 2021-05-23 23:31:27 +08:00 via iPhone
可以试试我写的 vu-query,更改商品名称后通过更新请求列表的缓存实现。
|
11
xiaoliaoliao 2021-05-23 23:34:07 +08:00 via iPhone
@xiaoliaoliao 而且也不需要使用 keep alive 去缓存页面了,vu-query 提供了开箱即用的请求数据缓存及滚动恢复
|
12
nianyu 2021-05-24 09:33:32 +08:00
详情页编辑删除返回到列表页重现刷新,那这时候有新增的文章,岂不是看不到了
|
13
xu2060 2021-05-24 11:36:41 +08:00
可以在详情页判断用户是否编辑,如果编辑了离开的时候在 beforeRouteLeave 的回调里面把更新完的标题传回列表页。(传回列表页如果没有父子关系,可以用 EventBus 传,如果是父子组件就用 this.$emit()鉴于现在没有 Vuex )这时候列表页的 data 里面保存了离开列表页时的滚动条位置。这样状态保持了,标题也更新了。
|
14
KouShuiYu 2021-05-24 12:24:39 +08:00
array.splice(编辑的 index,1,编辑后的);
|
15
letwewell 2021-05-24 13:47:47 +08:00
返回保证之前的滚动条位置 数据还要更新 。 假设返回后数据新增了几十条 滚动条位置应该变吗?
|
16
aools 2021-05-24 15:11:19 +08:00
deactivated 时记录滚动位置,activated 时重新请求数据并调整滚动条位置
|
17
sjhhjx0122 2021-05-24 16:57:16 +08:00
用 extends 封装个服务式的 drawer,用 promise 包裹,close 方法 resolve,然后把 close 方法传递给子组件,子组件逻辑结束触发 close 方法,父页面就能拿到回调了
drawer(child,params).then() |
18
darknoll 2021-05-24 22:39:22 +08:00
返回的时候计算滚动条位置
|
19
CokeMine 2021-05-25 01:51:43 +08:00 via Android
OnActivated 钩子重新请求数据
|
20
gzf6 2021-05-25 09:22:00 +08:00 via Android
project 提供一个更新的方法,编辑后请求一次
|
21
dfkjgklfdjg 2021-05-25 15:42:09 +08:00
详情页修改之后使用 eventBus 通知列表修改对应 id 的记录之中 title, notice 之类需要展示数据。
或者返回功能使用 $router.replace 替换 $router.push,通过 params 对象传递 id 以及 title 之类的属性,在列表页激活的时候去修改对应记录。 |
22
liuchengfeng1 2021-11-05 11:10:12 +08:00
|