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

這篇文章將為大家詳細(xì)講解有關(guān)Vue如何實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

需求一:

在一個(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-alive include="list">
<router-view/>
</keep-alive>

假設(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')) {
      // 在這里重新請(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è)條件：

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

2. 從詳情頁(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ì)重新刷新。

vue是什么

Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

關(guān)于“Vue如何實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。