路由的緩存 路由緩存是 Vue組件優化的一個重要方法 為什麼實現路由緩存? 為了 組件間 相互切換不會重覆載入數據,影響用戶體驗,我們通常需要將組件的數組實現緩存,當我們點過來,在點的時候會再次發送 ajax,想讓它發送之後把數據存起來。 我們需要,當我點擊的時候直接出來 <keep-alive> ...
路由的緩存
路由緩存是 Vue組件優化的一個重要方法
為什麼實現路由緩存?
為了 組件間 相互切換不會重覆載入數據,影響用戶體驗,我們通常需要將組件的數組實現緩存,當我們點過來,在點的時候會再次發送 ajax,想讓它發送之後把數據存起來。
我們需要,當我點擊的時候直接出來
<keep-alive> <router-view></router-view> </keep-alive> 步驟一:路由的寫法 { path:"/find/nan", name:"nan", component:Nan, meta:{ keepAlive:true } },
為true 這個組件就緩存,為false 就不緩存
步驟i二:app.vue中
使用 <keep-alive></keep-alive> 標簽將<router-view></router-view> 包裹起來。
keep-alive 是什麼?
包裹動態組件時,會緩存不活動的組件實例,而不是銷毀他們,他自身不會渲染一個 dom 元素 也不會出現在父組件中。
作者:晉飛翔
手機號(微信同步):17812718961
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收穫 不喜勿噴 如有建議 多多提議 謝謝!!!