vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
更新時間：2020年10月30日 09:40:20 作者：左森
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在App.vue文件中配置
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
在路由中配置
{
path: '/backstage',
component: resolve => require(['@/views/backstage/my'], resolve),
meta: { keepAlive: false }
},
{
path: '/backstage/info',
component: resolve => require(['@/views/backstage/my/info'], resolve),
meta: { keepAlive: false }
},
在頁面中利用 beforeRouteLeave 動態(tài)處理
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = false; // 不緩存
// to.meta.keepAlive = true; // 緩存
next();
}
};
補(bǔ)充知識：vue使用keep-alive后watch事件不銷毀解決方案
使用了keep-alive動態(tài)緩存頁面之后，有一些很難解決的問題：
每個頁面里面設(shè)置的watch監(jiān)聽事件，如果監(jiān)聽了路由的變化或者vuex的變化，在切換頁面的時候watch不會被銷毀，導(dǎo)致下一個頁面重復(fù)觸發(fā)上一個watch監(jiān)聽的對象，重復(fù)請求接口。
解決方案：
定義一個全局 mixin.js
export const mixin = {
data () {
return {
activatedFlag: false
};
},
mounted () {
this.activatedFlag = true;
},
activated () {
this.activatedFlag = true;
},
deactivated () {
this.activatedFlag = false;
}
};
在使用keep-alive緩存的頁面引入mixin
防止在非當(dāng)前頁面重復(fù)觸發(fā)keep-alive緩存頁面的方法
以上這篇vue內(nèi)置組件keep-alive事件動態(tài)緩存實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue封裝一個Tabbar組件?帶組件路由跳轉(zhuǎn)方式
這篇文章主要介紹了Vue封裝一個Tabbar組件?帶組件路由跳轉(zhuǎn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vite?vue使用cdn引入element-plus的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例
這篇文章主要為大家介紹了vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue3使用particles插件實現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3使用particles插件實現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了使用Vue逐步實現(xiàn)Watch屬性詳解，watch對象中的value分別支持函數(shù)、數(shù)組、字符串、對象，較為常用的是函數(shù)的方式，當(dāng)想要觀察一個對象以及對象中的每一個屬性的變化時，便會用到對象的方式2022-08-08
這篇文章主要介紹了對Vue3中reactive的深入理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue使用Echarts實現(xiàn)大屏可視化布局示例詳細(xì)講解
這篇文章主要介紹了Vue使用Echarts實現(xiàn)大屏可視化布局示例，本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了vue基于electron構(gòu)建第一個程序過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
今天小編就為大家分享一篇vue+elementui 對話框取消 表單驗證重置示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10