keep-alive緩存某一指定路由實現(xiàn)方式
更新時間：2025年07月31日 08:32:41 作者：Jedi?Hongbin
使用路由元信息配合keep-alive實現(xiàn)條件緩存,通過兩個router-view和meta變量判斷是否緩存特定路由,注意keep-alive優(yōu)先使用組件的name屬性而非路由name,避免常見錯誤
keep-alive緩存某一指定路由
路由的元信息，可以理解成保存某一路由的特定辨識信息，當辨識信息對上了某些判斷，則執(zhí)行某些操作
正常顯示的路由不使用keep-alive緩存
但是某一特定需要使用keep-alive保存操作記錄，就可以使用兩個router-view，通過判斷當前路由的meta信息中的變量的值來決定時候使用keep-alive
<transition> <router-view v-if="!$route.meta.isKeep"></router-view> </transition> <transition> <keep-alive> <router-view v-if="$route.meta.isKeep"></router-view> </keep-alive> </transition>
{
path: "/home/goods",
component: goods,
meta: {
isKeep: true//需要緩存的路由
}
}, {
path: "/home/goodsinfo/:id",
component: goodsInfo
},
keep-alive本身還有辨識路由的方式
還可以用keep-alive提供的三個屬性來實現(xiàn)
讓keep-alive根據(jù)條件來判斷是否緩存某一路由，不過keep-alive判斷的首先是vue實例的name屬性，這里要注意不是路由的name屬性，這時一個坑??
<transition> <keep-alive exclude="goods"> <router-view></router-view> </keep-alive> </transition>
export default {
name:"goods",
data() {
}
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue修改數(shù)據(jù)頁面無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2?element-ui?el-checkbox視圖不更新問題及解決
作者在開發(fā)過程中遇到了視圖不更新的問題,最終通過改變一個無關緊要的響應式數(shù)據(jù)來解決,讓視圖發(fā)生改變2024-12-12
這篇文章主要為大家詳細介紹了vue中axios的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了淺談vue權限管理實現(xiàn)及流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
ant-design-vue 實現(xiàn)表格內(nèi)部字段驗證功能
這篇文章主要介紹了ant-design-vue 實現(xiàn)表格內(nèi)部字段驗證功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了Vue組件之間的通信，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue項目下npm或yarn下安裝echarts多個版本方式
這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家分享了vue2.0構建單頁應用最佳實戰(zhàn)案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
在本篇文章里小編給大家分享的是一篇關于Vue—v-bind動態(tài)綁定class的知識點內(nèi)容，有需要的朋友們可以參考下。2020-01-01
h()函數(shù)是Vue.js中的一個工具函數(shù),用于創(chuàng)建虛擬DOM節(jié)點,具有更高的靈活性和控制力,本文介紹Vue h函數(shù)到底是個啥,感興趣的朋友一起看看吧2025-02-02