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-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è)條件：
- 從其他頁(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ì)重新刷新。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于詳解vue-router導(dǎo)航守衛(wèi)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vue-Router路由是根據(jù)不同的url地址展現(xiàn)不同的內(nèi)容或頁(yè)面,這篇文章主要給大家介紹了關(guān)于Vue3中如何使用Vue?Router的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
在Vue中實(shí)現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解（如熱力圖）
隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展，地圖熱點(diǎn)展示越來(lái)越受到人們的關(guān)注，在Vue應(yīng)用中，我們通常需要實(shí)現(xiàn)地圖熱點(diǎn)的展示和交互，以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果，本文將介紹在Vue中如何進(jìn)行地圖熱點(diǎn)展示與交互，包括熱力圖、點(diǎn)聚合等2023-07-07
vue router自動(dòng)判斷左右翻頁(yè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果
最近公司項(xiàng)目比較少終于有空來(lái)記錄一下自己對(duì)vue-router的一些小小的使用心得，本文給大家分享vue router自動(dòng)判斷左右翻頁(yè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果，感興趣的朋友一起看看吧2017-10-10
FileSaver.js?是在客戶端保存文件的解決方案，非常適合?在客戶端上生成文件的?Web?應(yīng)用，它是?HTML5?版本的?saveAs()?FileSaver?實(shí)現(xiàn)，這篇文章主要介紹了vue用FileSaverJs導(dǎo)出文件,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解vue或uni-app的跨域問(wèn)題解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了element 動(dòng)態(tài)合并表格的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue權(quán)限路由實(shí)現(xiàn)的方法示例總結(jié)
這篇文章主要給大家介紹了關(guān)于vue權(quán)限路由實(shí)現(xiàn)方法的相關(guān)資料，文中通過(guò)示例代碼介紹地方非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
正確更改Ant?Design?of?Vue樣式的問(wèn)題
這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue element封裝form表單的實(shí)現(xiàn)
本文主要介紹了vue element封裝form表單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06