vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例
在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 } },
在頁(yè)面中利用 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)緩存頁(yè)面之后,有一些很難解決的問(wèn)題:
每個(gè)頁(yè)面里面設(shè)置的watch監(jiān)聽(tīng)事件,如果監(jiān)聽(tīng)了路由的變化或者vuex的變化,在切換頁(yè)面的時(shí)候watch不會(huì)被銷毀,導(dǎo)致下一個(gè)頁(yè)面重復(fù)觸發(fā)上一個(gè)watch監(jiān)聽(tīng)的對(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緩存的頁(yè)面引入mixin

防止在非當(dāng)前頁(yè)面重復(fù)觸發(fā)keep-alive緩存頁(yè)面的方法

以上這篇vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 詳解Android studio 動(dòng)態(tài)fragment的用法2. Android如何加載Base64編碼格式圖片3. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題4. 圖文詳解vue中proto文件的函數(shù)調(diào)用5. 什么是python的自省6. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)7. Vuex localStorage的具體使用8. php模擬實(shí)現(xiàn)斗地主發(fā)牌9. vue 使用localstorage實(shí)現(xiàn)面包屑的操作10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備