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

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供召陵網(wǎng)站建設(shè)、召陵做網(wǎng)站、召陵網(wǎng)站設(shè)計(jì)、召陵網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、召陵企業(yè)網(wǎng)站模板建站服務(wù)，十余年召陵做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

實(shí)現(xiàn)思路：1，先實(shí)現(xiàn)返回到列表，停留在瀏覽位置，通過keep-alive緩存實(shí)現(xiàn)。2，詳情頁的操作結(jié)果，在列表頁更新=>首先在列表頁點(diǎn)擊跳轉(zhuǎn)詳情時(shí)，記錄選中文章的ID，返回來后，在onActived里面，調(diào)取剛才記錄的ID的詳情，調(diào)換列表list里面對(duì)應(yīng)ID的三個(gè)字段值【分享/評(píng)論/點(diǎn)贊】

具體代碼：

{
        path: "/home",
        name: "home",
        meta: {
            keepAlive: true,
        },
        component: () =>import("../pages/home.vue"),
    },

onActivated(() =>{
  //從詳情頁返回后，更新該文章最新的點(diǎn)贊數(shù)分享數(shù)和評(píng)論數(shù)
  // 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;
      }
    });
  }
});

以上，做個(gè)記錄。

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

標(biāo)題名稱：vue3文章詳情頁返回列表頁停留在瀏覽位置并更新數(shù)據(jù)-創(chuàng)新互聯(lián)
分享鏈接：http://jinyejixie.com/article48/dshhhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、電子商務(wù)、品牌網(wǎng)站制作、做網(wǎng)站、響應(yīng)式網(wǎng)站、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)