国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 實現(xiàn)前進刷新,后退不刷新的效果

zhisheng / 1853人閱讀

摘要:點擊某個列表項,跳到詳情頁,再從詳情頁后退回到列表頁時,不刷新。也就是說從其他頁面進到列表頁,需要刷新獲取數(shù)據(jù),從詳情頁返回到列表頁時不要刷新。

更多文章 需求一:

在一個列表頁中,第一次進入的時候,請求獲取數(shù)據(jù)。
點擊某個列表項,跳到詳情頁,再從詳情頁后退回到列表頁時,不刷新。
也就是說從其他頁面進到列表頁,需要刷新獲取數(shù)據(jù),從詳情頁返回到列表頁時不要刷新。

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

        
            
        

假設(shè)列表頁為 list.vue,詳情頁為 detail.vue,這兩個都是子組件。
我們在 keep-alive 添加列表頁的名字,緩存列表頁。
然后在列表頁的 created 函數(shù)里添加 ajax請求,這樣只有第一次進入到列表頁的時候才會請求數(shù)據(jù),當從列表頁跳到詳情頁,再從詳情頁回來的時候,列表頁就不會刷新。
這樣就可以解決問題了。

需求二:

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

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

這個 meta 屬性,可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設(shè)置。
設(shè)置完這個屬性,還要在 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
                   // 在這里重新請求數(shù)據(jù)
           }
       }
   },

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

從其他頁面(除了詳情頁)進來列表時,需要請求數(shù)據(jù)。

從詳情頁返回到列表頁時,如果詳情頁 meta 屬性中的 isRefreshtrue,也需要重新請求數(shù)據(jù)。

當我們在詳情頁中刪除了對應(yīng)的列表項時,就可以將詳情頁 meta 屬性中的 isRefresh 設(shè)為 true。這時再返回到列表頁,頁面會重新刷新。

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104518.html

相關(guān)文章

  • 再談vue前進刷新后退刷新,include實現(xiàn)方法。

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

    layman 評論0 收藏0
  • 實現(xiàn)一個前端路由,如何實現(xiàn)瀏覽器前進后退

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

    劉東 評論0 收藏0
  • 另辟蹊徑:vue單頁面,多路由,前進刷新后退刷新

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

    Ocean 評論0 收藏0
  • 原生 js 實現(xiàn)一個前端路由 router

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

    gggggggbong 評論0 收藏0
  • 前端路由原理解析和實現(xiàn)

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

    lavor 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<