1、实现思路:
- keep-alive include
- 使用keep-alive包裹 router-view,动态改变 缓存的页面
注意:使用keep-alive缓存的vue页面,必须设置name,不设置name的话,使用include默认是缓存的
2、代码
2.1、keep-alive包裹, include过滤,keepList存在的界面进行缓存,不存在的不缓存
<keep-alive :include="keepList">
<router-view></router-view>
</keep-alive>
<script>
import { mapGetters } from "vuex"
export default {
data:...
...
computed: {
...mapGetter(["keepList"])
}
}
</script>
2.2、vuex存储keepList
common.js
const common = {
state: {
...
keepList: ["login","index"]
},
mutations: {
SET_KEEPLIST: (state, keepList) => {
state.keepList = keepList
}
}
}
export default common;
getter.js
const getters = {
keepList: (state) => state.common.keepList
}
export default getters
index.js
import Vue from "vue"
import Vuex from "vuex"
import common from "./modules/common"
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
common
},
getters
})
export default store;
2.3、改变keepList
根据自己需要的逻辑改变keepList
调用vuex方法赋值
...
let keepListTem = ['login']
this.$store.commit("SET_KEEPLIST", keepListTem)