vue实现前进刷新后退缓存的方法

0.205字数 839阅读 2704

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来设置,将表单的内容一一保存起来;
缺点:比较麻烦

  1. 第四种方法:这个是我常用的方法,如果变换得好,可以根据这个方法来实现返回的时候,保持原始页面的滚动位置。也可以让其前进请求,后退不请求。
    这个方法我是根据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;才可以返回页面的滚动位置。
希望这篇文章给大家带来帮助~~~

推荐阅读更多精彩内容