在App.vue文件中配置















在路由中配置

{

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 }

},

{

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 动态处理
export default {

data() {

return {};

},

methods: {},

beforeRouteLeave(to, from, next) {

// 设置下一个路由的 meta

to.meta.keepAlive = false; // 不缓存

// to.meta.keepAlive = true; // 缓存

next();

}
};
export default {

data() {

return {};

},

methods: {},

beforeRouteLeave(to, from, next) {

// 设置下一个路由的 meta

to.meta.keepAlive = false; // 不缓存

// to.meta.keepAlive = true; // 缓存

next();

}
};补充知识：vue使用keep-alive后watch事件不销毁解决方案补充知识：补充知识：vue使用keep-alive后watch事件不销毁解决方案使用了keep-alive动态缓存页面之后，有一些很难解决的问题：每个页面里面设置的watch监听事件，如果监听了路由的变化或者vuex的变化，在切换页面的时候watch不会被销毁，导致下一个页面重复触发上一个watch监听的对象，重复请求接口。解决方案：解决方案：定义一个全局 mixin.js
export const mixin = {
data () {

return {

activatedFlag: false

};
},
mounted () {

this.activatedFlag = true;
},
activated () {

this.activatedFlag = true;
},
deactivated () {

this.activatedFlag = false;
}
};
export const mixin = {
data () {

return {

activatedFlag: false

};
},
mounted () {

this.activatedFlag = true;
},
activated () {

this.activatedFlag = true;
},
deactivated () {

this.activatedFlag = false;
}
};在使用keep-alive缓存的页面引入mixin防止在非当前页面重复触发keep-alive缓存页面的方法以上这篇vue内置组件keep-alive事件动态缓存实例就是小编分享给大家的全部内容了，希望能给大家一个参考。