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

第Vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果在一個(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è)置:

keep-aliveinclude="list"

router-view/

/keep-alive

假設(shè)列表頁(yè)為list.vue,詳情頁(yè)為detail.vue,這兩個(gè)都是子組件。

我們?cè)趉eep-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){

constfname=

consttname=

if(from.meta.isRefresh||(fname!='detail'tname=='list')){

//在這里重新請(qǐng)求數(shù)據(jù)

from.meta.isRefresh=false

}

這樣就不需要在列表頁(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