📖需求：在列表頁，瀏覽過程中，點擊其中一篇文章進入詳情頁，在詳情頁可以進行分享/評論/點贊等操作，返回到列表頁，停留在剛才瀏覽的位置，并且卡片下方的分享數/評論數/點贊數等數據實時更新。

創新互聯專業為企業提供召陵網站建設、召陵做網站、召陵網站設計、召陵網站制作等企業網站建設、網頁設計與制作、召陵企業網站模板建站服務，十余年召陵做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

實現思路：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元起，快前往官網查看詳情吧

標題名稱：vue3文章詳情頁返回列表頁停留在瀏覽位置并更新數據-創新互聯
分享鏈接：http://m.newbst.com/article48/dshhhp.html

成都網站建設公司_創新互聯，為您提供移動網站建設、電子商務、品牌網站制作、做網站、響應式網站、域名注冊

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯