vue 中的keep-alive實例代碼
更新時間：2018年07月20日 07:56:10 作者：前端那些事兒
這篇文章主要介紹了vue中的keep-alive實例代碼，vue實現組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下
Vue 實現組件信息的緩存
當我們在開發(fā)vue的項目過程中，避免不了在路由切換到其他的component再返回后該組件數據會重新加載，處理這種情況我們就需要用到keep-alive來緩存vue的組件信息，使其不再重新加載。
一、在app.vue里
<keep-alive> <router-view></router-view> </keep-alive>
但是這種情況會對所有的組件進行緩存，不能達到單個組件緩存的效果。
那么我們給部分組件加上，實現方法如下：
在app.vue
<!--這里是需要keepalive的--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> <keep-alive> <!-- 這里不會被keepAlive --> <router-view v-if="!$route.meta.keepAlive"></router-view>
二、 在路由的index.js頁面里
{
path: '',
name: '',
component: '',
meta: {keepAlive: true} // 這個是需要keepalive的
}，
{
path: '',
name: '',
component: ,
meta: {keepAlive: false} // 這是不會被keepalive的
}
這就實現了部分組件的緩存功能
如果緩存的組件想要清空數據或者執(zhí)行初始化方法，在加載組件的時候調用activated鉤子函數，如下：
activated: function () {
this.data = ‘'
}
總結
以上所述是小編給大家介紹的vue 中的keep-alive實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:
相關文章
組件之間通信分為三種：父-子；子-父；跨級組件通信。下面，就組件間如何通信做一些總結。需要的朋友可以參考下2018-11-11
Antd-vue Table組件添加Click事件,實現點擊某行數據教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現點擊某行數據教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue3?父控件遠程獲取數據，在子組件上顯示不出來，本文給大家分享兩種解決方案幫助大家解決這個問題,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了vue子組件設計provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Vue 3 的 Composition API 帶來了強大的 reactive 函數,它允許你在 Vue 應用程序中創(chuàng)建響應式數據,本文我們將深入探討 Vue 3 的 reactive,并提供一些注意事項和解決方案,希望可以幫助打更好地使用它2023-11-11
這篇文章主要介紹了vue.js模版插值的原理與實現方法,結合實例形式簡單分析了vue.js模板插值的基本功能、原理、實現方法與注意事項,需要的朋友可以參考下2023-04-04
Electron也可以快速地將你的網站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Vue和React中快速使用Electron的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
本篇文章主要介紹了詳解vue組件化開發(fā)-vuex狀態(tài)管理庫，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
antd Select下拉菜單動態(tài)添加option里的內容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11