Vue 實現(xiàn)前進(jìn)刷新后退不刷新的效果
需求一:
在一個列表頁中，第一次進(jìn)入的時候，請求獲取數(shù)據(jù)。
點(diǎn)擊某個列表項，跳到詳情頁，再從詳情頁后退回到列表頁時，不刷新。
也就是說從其他頁面進(jìn)到列表頁，需要刷新獲取數(shù)據(jù)，從詳情頁返回到列表頁時不要刷新。
解決方案在 app.vue 設(shè)置:
<keep-alive include="list"> <router-view/> </keep-alive>
假設(shè)列表頁為 list.vue ,詳情頁為 detail.vue ,這兩個都是子組件。
我們在 keep-alive 添加列表頁的名字，緩存列表頁。
然后在列表頁的 created 函數(shù)里添加ajax請求，這樣只有第一次進(jìn)入到列表頁的時候才會請求數(shù)據(jù)，當(dāng)從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。
這樣就可以解決問題了。
需求二:
在需求一的基礎(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')) {
// 在這里重新請求數(shù)據(jù)
from.meta.isRefresh = false
}
}
}
這樣就不需要在列表頁的 created 函數(shù)里用 ajax 來請求數(shù)據(jù)了，統(tǒng)一放在 App.vue 里來處理。
觸發(fā)請求數(shù)據(jù)有兩個條件：
- 從其他頁面（除了詳情頁）進(jìn)來列表時，需要請求數(shù)據(jù)。
- 從詳情頁返回到列表頁時，如果詳情頁 meta 屬性中的 isRefresh 為 true ，也需求重新請求數(shù)據(jù)。
當(dāng)我們在詳情頁中刪除了對應(yīng)的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設(shè)為 true 。這時再返回到列表頁，頁面會重新刷新。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于詳解vue-router導(dǎo)航守衛(wèi)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
Vue-Router路由是根據(jù)不同的url地址展現(xiàn)不同的內(nèi)容或頁面,這篇文章主要給大家介紹了關(guān)于Vue3中如何使用Vue?Router的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
在Vue中實現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解（如熱力圖）
隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展，地圖熱點(diǎn)展示越來越受到人們的關(guān)注，在Vue應(yīng)用中，我們通常需要實現(xiàn)地圖熱點(diǎn)的展示和交互，以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果，本文將介紹在Vue中如何進(jìn)行地圖熱點(diǎn)展示與交互，包括熱力圖、點(diǎn)聚合等2023-07-07
vue router自動判斷左右翻頁轉(zhuǎn)場動畫效果
最近公司項目比較少終于有空來記錄一下自己對vue-router的一些小小的使用心得，本文給大家分享vue router自動判斷左右翻頁轉(zhuǎn)場動畫效果，感興趣的朋友一起看看吧2017-10-10
FileSaver.js?是在客戶端保存文件的解決方案，非常適合?在客戶端上生成文件的?Web?應(yīng)用，它是?HTML5?版本的?saveAs()?FileSaver?實現(xiàn)，這篇文章主要介紹了vue用FileSaverJs導(dǎo)出文件,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解vue或uni-app的跨域問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了element 動態(tài)合并表格的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue權(quán)限路由實現(xiàn)的方法示例總結(jié)
這篇文章主要給大家介紹了關(guān)于vue權(quán)限路由實現(xiàn)方法的相關(guān)資料，文中通過示例代碼介紹地方非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了vue element封裝form表單的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06