vue學習指南：第十三篇(詳細) - Vue的 路由 第三篇 ( 路由的緩存 )

路由的緩存

路由緩存是 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
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收獲 不喜勿噴 如有建議 多多提議 謝謝！！！