vue路由实现前进刷新后退不刷新功能
需求
有A->B->C三个页面,要实现A页面进入B页面,B页面重新获取数据。从C页面返回到B页面,B页面有缓存,不用重新获取数据。
实现方法
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。<keep-alive>
的include属性对应匹配的组件将会被缓存。在vuex声明一个数组变量作为include属性的值。在B页面上使用beforeRouteEnter内给变量数组添加B页面组件名添加缓存,beforeRouteLeave如果不是跳转到C页面,就删除变量数组中B页面的组件,删除缓存。
1.在vuex声明一个数组变量keepAlive,存放需要缓存路由组件name
vuex的index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
keepAlive: [] //需要缓存(keep-alive)的路由组件name
},
mutations: {
//添加缓存组件
keepAliveAdd(state, data) {
let keepAliveArr = state.keepAlive;
let key = true;
for (let index = 0; index < keepAliveArr.length; index++) {
const element = keepAliveArr[index];
if (element == data) {
key = false;
}
}
if (key) {
state.keepAlive.push(data);
}
},
//删除缓存组件
keepAliveDel(state, data) {
let keepAliveArr = state.keepAlive;
for (let index = 0; index < keepAliveArr.length; index++) {
const element = keepAliveArr[index];
if (element == data) {
keepAliveArr.splice(index, 1);
}
}
}
}
});
2.APP.vue添加keep-alive
<template>
<div id="app">
<keep-alive :include="keepAlive" :max="100">
<router-view > </router-view>
</keep-alive>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "App",
computed: {
...mapState(["keepAlive"])
}
};
</script>
3.B页面中通过路由导航守卫控制缓存
<script>
import { mapMutations } from "vuex";
export default {
name: "B",
beforeRouteEnter(to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
vm.keepAliveAdd("B");
});
},
beforeRouteLeave(to, from, next) {
if (to.name != "C") {
this.keepAliveDel("B");
}
next();
},
methods: {
...mapMutations(["keepAliveAdd"]),
...mapMutations(["keepAliveDel"])
}
};
</script>