vue实现前进刷新后退缓存的方法其实有好多种。网上搜出来的很多不齐全，甚至效果不好，先给大家介绍下面的几种可行的方法：
下面的几个方法都是根据需求来实现：A页面进到B页面，B页面刷新，B页面进到C页面的时候，C页面再返回B页面的时候，B整个页面缓存。
1）首先第一种方法就是根据路由来实现，比如B页面的路由是/b，需要缓存，而跳到c页面的路由是/b/c，C页面是B页面的子页面，当想“跳到”C页面的时候，就可以设置B页面隐藏，c页面设置position覆盖住b页面的内容，让c页面显示了
缺点：刷新的时候，b原始页面显示出来，给用户体验不好，可能会通不过测试这一关
2）第二种方法就是：设置A页进到B页面的时候强制刷新。在A页面设置刷新sessionstorage棋子flag为1,B页面设置keepalive为true,只要在B在初始化函数的时候，如果获得flag为1，则进行页面强制刷新，（如果不这样做，会有很多bug出现）而在B页面这样设置路由钩子：
beforeRouteLeave(to, from, next) {
if(to.name=='C页面的name'){
if(!from.meta.keepAlive){
from.meta.keepAlive = true
}
next()
}else{
from.meta.keepAlive = false
to.meta.keepAlive = false
this.$destroy()
next()
}
在app.vue文件里面记得写上：
<keep-alive>
<router-view v-if="$route.meta.keepAlive" class='router-view'></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" class='router-view'></router-view>
这样就可以达到缓存的效果了；
缺点：强制刷新B页面使得用户体验不怎么好
3）第三种方法：如果你的场景是B页面有表单需要填写，跳到C页面选择然后跳回B页面，那可以根据vuex来设置，将表单的内容一一保存起来；
缺点：比较麻烦
- 第四种方法：这个是我常用的方法，如果变换得好，可以根据这个方法来实现返回的时候，保持原始页面的滚动位置。也可以让其前进请求，后退不请求。
这个方法我是根据vuex+keepalive来实现的
首先在app.vue里面设置：
<transition >
<keep-alive :include='includePage'>
<router-view v-if="$route.meta.keepAlive" class='router-view'></router-view>
<router-view v-if="!$route.meta.keepAlive" class='router-view'></router-view>
</keep-alive>
</transition>
在vuex文件里面
import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './types'
Vue.use(Vuex)
const state = {
includePage: [],
}
const actions = {
}
const getters = {
includePage: state => state.includePage,
}
const mutations = {
[types.UPDATE_INCLUDE_PAGE] (state, obj) {
if(obj.flag){
state.includePage.push(obj.pageName);
}else{
//includePage=[]
state.includePage.splice(state.includePage.indexOf(obj.pageName),1);
}
}
}
//导出vue实例
export default new Vuex.Store({
state,
actions,
getters,
mutations
})
在types.js文件里面是这样写：
export const UPDATE_INCLUDE_PAGE = 'UPDATE_INCLUDE_PAGE' //更新routerview缓存页面
在A页面的初始化mounted设置：
if (this.includePage.indexOf("cdata") != -1) {//cdata其实就是c页面的name，可以在路由设置name
//console.log('有缓存，清除缓存')
this.$store.commit('UPDATE_INCLUDE_PAGE', {pageName: 'cdata', flag: false});
};
在B页面设置：
,mounted() {
if (this.includePage.indexOf("cdata") == -1) {
//如果EditAddress没有缓存，就设置缓存
//console.log(this.includePage)
//this.UPDATE_INCLUDE_PAGE({pageName: 'cdata', flag: true})
this.$store.commit('UPDATE_INCLUDE_PAGE', {pageName: 'cdata', flag: true});
};
}
还差一步，就是动态设置include,在app.vue里面引入：import { mapGetters } from 'vuex';再加上方法：
computed:{
...mapGetters([
"includePage"
])
}
这样的方法是比较简单哦，而且用户体检很好，是我最常用的方法。
另外如果你的页面有很多列表，需要滚动，需求是返回的时候。要返回到原始页面的滚动位置，其实也可以利用这个缓存方法来做，如果设置缓存了，还是没有到滚动的位置，那大家要注意是不是页面设置了内容滚动overflow: auto；当初踩这个坑的时候，无论怎么样，我返回document.body.scrollTop始终为0，后面去掉了overflow: auto;才可以返回页面的滚动位置。
希望这篇文章给大家带来帮助~~~
