项目需求
部分路由页面需要被缓存，可以在特定时期取消缓存，比方说登陆过期
解决思路
- 利用keep-alive
- 结合vuex可以动态决定哪些路由页面（路由页面其实也是组件）需要被缓存
解决代码
1. 入口文件
<template>
<div id="app">
<keep-alive :include="$store.state.keepAliveList">
<router-view />
</keep-alive>
</div>
</template>
2. vuex store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 需要缓存的组件
keepAliveList: [],
},
mutations: {},
actions: {},
modules: {}
})
3. 需要被缓存的页面代码
<template>
<div>
</div>
</template>
<script>
export default {
// 起个规范的名字
name:'data-check',
components: {
},
data() {
return {
}
},
computed: {},
// 初始化时像state增加自己，由于被缓存了，只会执行一次
mounted() {
this.$store.state.keepAliveList.push("data-check");
},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>
4. 登录失效取消缓存
import Vue from "vue";
import axios from "axios";
import router from '../router'
import store from '../store'
Vue.prototype.$http = axios;
// Add a request interceptor
axios.interceptors.request.use(
function (config) {
// Do something before request is sent
return config;
},
function (error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
axios.interceptors.response.use(
function (response) {
console.log(response.data);
if (response.data.status !== "1") {
if (response.data.status === "10001" && response.data.message === "TOKEN信息没有提供") {
store.state.keepAliveList = [];
// 跳转到登录页
router.replace({
name: "bind"
}).catch(() => {});
}
}
}
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response.data;
},
function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
}
);
👍 码字不易，别忘点赞💖💖💖💖💖💖💖💖💖💖💖