Vue?keepAlive實現(xiàn)不同的路由共用一個組件component的緩存問題(推薦)
不同的路由共用一個組件component,并用keepAlive實現(xiàn)不同的頁面緩存
實現(xiàn)功能:使用列表頁面檢索的數(shù)據(jù)跳轉(zhuǎn)到對應(yīng)的詳情頁面,從詳情頁回到列表頁能記住上次檢索的數(shù)據(jù),再次切換到詳情頁時能正常取到對應(yīng)的數(shù)據(jù)
實現(xiàn)方式使用Vue keepAlive實現(xiàn)頁面緩存,整理了一些資料和其他的博客在這里記錄一下。。。。
keepAlive原理:
1,保留組件的狀態(tài),在重新進(jìn)入頁面時避免重新渲染。
2、是抽象組件,它自身不會渲染DOM元素,也不會出現(xiàn)在父組件鏈中。
3、當(dāng)組件在 內(nèi)被切換,它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。
實現(xiàn)
在app.vue中改寫router-view
<keep-alive :include="cachedViews" :exclude="disCachedViews"> <router-view/> </keep-alive>
注意 cachedViews里面存的是由路由name構(gòu)成的數(shù)組,數(shù)組的name需與組件的name一致,否詞不能達(dá)到緩存的效果。
因為這里用的是動態(tài)路由,組件的name不能根據(jù)路由動態(tài)更改,所以用另外一種方式
<keep-alive> <router-view v-if="$route.meta.keepAlive" > <!-- 這里是會被緩存的視圖組件 --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive" > <!-- 這里是不被緩存的視圖組件 --> </router-view>
在構(gòu)建路由時路由元信息meta加上屬性keepAlive,為true
這里已經(jīng)實現(xiàn)了頁面緩存的效果,及第一個功能檢索的列表頁面list.vue進(jìn)入到詳情i頁nfo.vue,再切換回到list.vue可以看到已檢索的數(shù)據(jù)列表。
2.打開一個新的詳情頁,發(fā)現(xiàn)數(shù)據(jù)是上一次打開的頁面數(shù)據(jù),數(shù)據(jù)并沒有根據(jù)路由刷新
因為我們這里做了keepAlive緩存,重新進(jìn)入頁面并不會觸發(fā)created方法,而且詳情頁info.vue做了多路由復(fù)用同一個組件的情況,不能使用activated()去觸發(fā)。
解決這個問題必須解決路由復(fù)用問題,使用Vue-router做項目時,會遇到如/info/:id這樣只改變id號的場景。由于router-view是復(fù)用的,單純的改變id號并不會刷新router-view
1.方法一:通過 watch 監(jiān)聽路由
watch: { '$route'(to, from) { if (to.path !== from.path) { console.log('檢測到路由變化') // 初始化數(shù)據(jù) this.initData() } } },
2.方法二:用 :key 來阻止“復(fù)用”
設(shè)置key為$route.fullPath之后,由于兩個路由的fullPath不同,組件會被強(qiáng)制不復(fù)用
<keep-alive> <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"> <!-- 這里是會被緩存的視圖組件 --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"> <!-- 這里是不被緩存的視圖組件 --> </router-view>
3.方法三:通過 vue-router 的鉤子函數(shù) beforeRouteEnter beforeRouteUpdate beforeRouteLeave
beforeRouteEnter (to, from, next) { // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實例 `this` // 因為當(dāng)鉤子執(zhí)行前,組件實例還沒被創(chuàng)建 }, beforeRouteUpdate (to, from, next) { // 在當(dāng)前路由改變,但是該組件被復(fù)用時調(diào)用 // 舉例來說,對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候, // 由于會渲染同樣的 Foo 組件,因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。 // 可以訪問組件實例 `this` }, beforeRouteLeave (to, from, next) { // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用 // 可以訪問組件實例 `this` }
經(jīng)過實踐,方法二是比較好用的
到此這篇關(guān)于Vue keepAlive實現(xiàn)不同的路由共用一個組件component的緩存問題的文章就介紹到這了,更多相關(guān)Vue keepAlive組件緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue element-ui實現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實現(xiàn)el-table表格多選以及回顯方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能
這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11基于vue實現(xiàn)多引擎搜索及關(guān)鍵字提示
這篇文章主要為大家詳細(xì)介紹了基于vue實現(xiàn)多引擎搜索及關(guān)鍵字提示的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03Vue學(xué)習(xí)筆記進(jìn)階篇之過渡狀態(tài)詳解
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之過渡狀態(tài)詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07Vue路由組件的緩存keep-alive和include屬性的具體使用
:瀏覽器頁面在進(jìn)行切換時,原有的路由組件會被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11