扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
📖需求：在列表页，浏览过程中，点击其中一篇文章进入详情页，在详情页可以进行分享/评论/点赞等操作，返回到列表页，停留在刚才浏览的位置，并且卡片下方的分享数/评论数/点赞数等数据实时更新。
实现思路：1，先实现返回到列表，停留在浏览位置，通过keep-alive缓存实现。2，详情页的操作结果，在列表页更新=>首先在列表页点击跳转详情时，记录选中文章的ID，返回来后，在onActived里面，调取刚才记录的ID的详情，调换列表list里面对应ID的三个字段值【分享/评论/点赞】
具体代码：
{
path: "/home",
name: "home",
meta: {
keepAlive: true,
},
component: () =>import("../pages/home.vue"),
},onActivated(() =>{
//从详情页返回后，更新该文章最新的点赞数分享数和评论数
// checkedUid 选中文章的ID，在goDetail()方法中赋值。
if (checkedUid.value) {
getArticleDetail(checkedUid.value).then((res) =>{
if (res.code == 10000) {
const refreshIndex = homeData.detailList.findIndex(
(item) =>item.uid === res.data.uid
);
homeData.detailList[refreshIndex].shareNum = res.data.shareNum;
homeData.detailList[refreshIndex].commentNum = res.data.commentNum;
homeData.detailList[refreshIndex].thumbsNum = res.data.thumbsNum;
}
});
}
});以上，做个记录。
你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网