成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Vue 實(shí)現(xiàn)前進(jìn)刷新，后退不刷新的效果

zhisheng / 1865人閱讀

摘要：點(diǎn)擊某個(gè)列表項(xiàng)，跳到詳情頁(yè)，再?gòu)脑斍轫?yè)后退回到列表頁(yè)時(shí)，不刷新。也就是說(shuō)從其他頁(yè)面進(jìn)到列表頁(yè)，需要刷新獲取數(shù)據(jù)，從詳情頁(yè)返回到列表頁(yè)時(shí)不要刷新。

更多文章 需求一：

在一個(gè)列表頁(yè)中，第一次進(jìn)入的時(shí)候，請(qǐng)求獲取數(shù)據(jù)。
點(diǎn)擊某個(gè)列表項(xiàng)，跳到詳情頁(yè)，再?gòu)脑斍轫?yè)后退回到列表頁(yè)時(shí)，不刷新。
也就是說(shuō)從其他頁(yè)面進(jìn)到列表頁(yè)，需要刷新獲取數(shù)據(jù)，從詳情頁(yè)返回到列表頁(yè)時(shí)不要刷新。

解決方案
在 App.vue設(shè)置：

假設(shè)列表頁(yè)為 list.vue，詳情頁(yè)為 detail.vue，這兩個(gè)都是子組件。
我們?cè)?keep-alive 添加列表頁(yè)的名字，緩存列表頁(yè)。
然后在列表頁(yè)的 created 函數(shù)里添加 ajax請(qǐng)求，這樣只有第一次進(jìn)入到列表頁(yè)的時(shí)候才會(huì)請(qǐng)求數(shù)據(jù)，當(dāng)從列表頁(yè)跳到詳情頁(yè)，再?gòu)脑斍轫?yè)回來(lái)的時(shí)候，列表頁(yè)就不會(huì)刷新。
這樣就可以解決問(wèn)題了。

需求二：

在需求一的基礎(chǔ)上，再加一個(gè)要求：可以在詳情頁(yè)中刪除對(duì)應(yīng)的列表項(xiàng)，這時(shí)返回到列表頁(yè)時(shí)需要刷新重新獲取數(shù)據(jù)。
我們可以在路由配置文件上對(duì) detail.vue 增加一個(gè) meta 屬性。

        {
           path: "/detail",
           name: "detail",
           component: () => import("../view/detail.vue"),
           meta: {isRefresh: true}
       },

這個(gè) meta 屬性，可以在詳情頁(yè)中通過(guò) this.$route.meta.isRefresh 來(lái)讀取和設(shè)置。
設(shè)置完這個(gè)屬性，還要在 App.vue 文件里設(shè)置 watch 一下 $route 屬性。

    watch: {
       $route(to, from) {
           const fname = from.name
           const tname = to.name
           if (from.meta.isRefresh || (fname != "detail" && tname == "list")) {
               from.meta.isRefresh = false
                   // 在這里重新請(qǐng)求數(shù)據(jù)
           }
       }
   },

這樣就不需要在列表頁(yè)的 created 函數(shù)里用 ajax 來(lái)請(qǐng)求數(shù)據(jù)了，統(tǒng)一放在 App.vue 里來(lái)處理。
觸發(fā)請(qǐng)求數(shù)據(jù)有兩個(gè)條件：

從其他頁(yè)面（除了詳情頁(yè)）進(jìn)來(lái)列表時(shí)，需要請(qǐng)求數(shù)據(jù)。

從詳情頁(yè)返回到列表頁(yè)時(shí)，如果詳情頁(yè) meta 屬性中的 isRefresh 為 true，也需要重新請(qǐng)求數(shù)據(jù)。

當(dāng)我們?cè)谠斍轫?yè)中刪除了對(duì)應(yīng)的列表項(xiàng)時(shí)，就可以將詳情頁(yè) meta 屬性中的 isRefresh 設(shè)為 true。這時(shí)再返回到列表頁(yè)，頁(yè)面會(huì)重新刷新。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104518.html

相關(guān)文章

  • 再談vue前進(jìn)刷新，后退不刷新，include實(shí)現(xiàn)方法。

    摘要：并設(shè)置后退頁(yè)面數(shù)組。跳轉(zhuǎn)到或頁(yè)面，返回后回到緩存頁(yè)面，不刷新。由其他頁(yè)面進(jìn)入則刷新。反正目前可以實(shí)現(xiàn)想要的效果。 關(guān)于填坑vue的前進(jìn)刷新與后退不刷新，網(wǎng)上有很多方法，基本都是利用 keep-alive，但是試了好多種方法都不盡人意，后來(lái)有人提示說(shuō)基于keepalive include，試驗(yàn)了一下找到了些思路，暫時(shí)實(shí)驗(yàn)可行，分享下共同探討學(xué)習(xí)，也許不是最佳解決方案，但確實(shí)有效。這里需要...

    layman 評(píng)論0 收藏0

  • 實(shí)現(xiàn)一個(gè)前端路由，如何實(shí)現(xiàn)瀏覽器的前進(jìn)與后退 ？

    摘要：執(zhí)行過(guò)程如下實(shí)現(xiàn)瀏覽器的前進(jìn)后退第二個(gè)方法就是用兩個(gè)棧實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能。我們使用兩個(gè)棧，和，我們把首次瀏覽的頁(yè)面依次壓入棧，當(dāng)點(diǎn)擊后退按鈕時(shí)，再依次從棧中出棧，并將出棧的數(shù)據(jù)依次放入棧。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你實(shí)現(xiàn)一個(gè)前端路由，應(yīng)該如何實(shí)現(xiàn)瀏覽器的前進(jìn)與后退 ？ 2. 問(wèn)題...

    劉東 評(píng)論0 收藏0

  • 另辟蹊徑：vue單頁(yè)面，多路由，前進(jìn)刷新，后退不刷新

    摘要：如何添加這個(gè)條件，判斷用戶(hù)是否刷新了頁(yè)面呢我們知道，當(dāng)使用后，只有第一次進(jìn)入后會(huì)觸發(fā)鉤子函數(shù)，再次進(jìn)入就不再執(zhí)行了。 目的：vue-cli構(gòu)建的vue單頁(yè)面應(yīng)用，某些特定的頁(yè)面，實(shí)現(xiàn)前進(jìn)刷新，后退不刷新，類(lèi)似app般的用戶(hù)體驗(yàn)。注：　此處的刷新特指當(dāng)進(jìn)入此頁(yè)面時(shí)，觸發(fā)ajax請(qǐng)求，向服務(wù)器獲取數(shù)據(jù)。不刷新特指當(dāng)進(jìn)入此頁(yè)面時(shí)，不觸發(fā)ajax請(qǐng)求，而是使用之前緩存的數(shù)據(jù)，以便減少服務(wù)器請(qǐng)求...

    Ocean 評(píng)論0 收藏0

  • 原生 js 實(shí)現(xiàn)一個(gè)前端路由 router

    摘要：實(shí)現(xiàn)原理現(xiàn)在前端的路由實(shí)現(xiàn)一般有兩種，一種是路由，另外一種是路由。現(xiàn)在的前端主流框架的路由實(shí)現(xiàn)方式都會(huì)采用路由，本項(xiàng)目采用的也是。當(dāng)值發(fā)生改變的時(shí)候，我們可以通過(guò)事件監(jiān)聽(tīng)到，從而在回調(diào)函數(shù)里面觸發(fā)某些方法。 效果圖： showImg(https://segmentfault.com/img/remote/1460000018058419?w=422&h=744); 項(xiàng)目地址：https...

    gggggggbong 評(píng)論0 收藏0

  • 前端路由原理解析和實(shí)現(xiàn)

    摘要：如何實(shí)現(xiàn)前端路由要實(shí)現(xiàn)前端路由，需要解決兩個(gè)核心如何改變卻不引起頁(yè)面刷新如何檢測(cè)變化了下面分別使用和兩種實(shí)現(xiàn)方式回答上面的兩個(gè)核心問(wèn)題。 原文鏈接：github.com/whinc/blog/… 在單頁(yè)應(yīng)用如此流行的今天，曾經(jīng)令人驚嘆的前端路由已經(jīng)成為各大框架的基礎(chǔ)標(biāo)配，每個(gè)框架都提供了強(qiáng)大的路由功能，導(dǎo)致路由實(shí)現(xiàn)變的復(fù)雜。想要搞懂路由內(nèi)部實(shí)現(xiàn)還是有些困難的，但是如果只想了解路由實(shí)現(xiàn)基本...

    lavor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<