在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)緩存實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。