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