（vue）实现前进刷新页面，后退缓存页面，重载页面，及缓存页与非缓存页动画效果乱问题

好久没写干货了，趁这次公司升级系统，抽空写下。目前本人研究出该方法一段时间了，暂没发现有坑，有坑希望能人指出

重载页面（最简单方法，直接在入口文件APP.vue处处理）

全局引用，不需要针对个别页面处理，简化开发工作量

  • 添加state
const state = {
    isReload: false, // 是否需要重加载页面组件
}
  • 创建mutation方法
// 是否需要重载
[IS_RELOAD](state) {
    state.isReload = !state.isReload;
}
  • 在入口处设置激活组件
<router-view class='router-view' v-if="isRouterAlive"></router-view>
// 设置data数据
isRouterAlive: true
// watch监听isReload状态
isReload(value) {
  // 一旦发生变化则重载组件
    this.isRouterAlive = false;
    this.$nextTick(() => {
      this.isRouterAlive = true;
    })
}
  • 通过改变isReload状态来实现重载页面
this.$store.commit('IS_RELOAD');
实现前进刷新后退缓存

vue本身存在BUG，一旦使用缓存且$destroy方法，该页面每次打开都会重新生成，会不断叠加生成，失去了缓存的效果，后来经过查阅资料后，再三思考，既然vue支持v-if来切换重载页面，那意味着清理缓存也一样可以。最后发现效果还不错，清空了所有页面的同时，如果不发生跳转，也生成了新的页面，中间无过渡动画效果，但该处理方式估计坑挺多的，后放弃该方法，转而采用以下方式：

  • 添加state
const state = {
   cacheComponents: {}, // 已经缓存的页面组件
}
  • 创建mutation方法
// 是否需要清已缓存的页面组件标识
    [REMOVE_CATCHE_PAGE](state) {
        state.cacheComponents = { };
    }
  • 在入口处设置缓存组件
<template>
    <div id="app">
        <transition>
          <keep-alive>
            <router-view class='router-view' v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
          </keep-alive>
        </transition>
        <transition>
          <router-view class='router-view' v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
        </transition>
    </div>
</template>
  • 在入口文件main.js处判断前进还是后退，及缓存组件
import Vue from 'vue'
import router from 'router'
import store from 'store'

let cacheComponents = {};
store.commit("SAVE_CATCH_COMPONENTS", cacheComponents); // 刷新就重置，防止刷新后退无法执行初始化

// 需要为Vue对象增加三个原型方法和一个私有方法
// 重新定义路由切换，配合页面切换动画效果
1. 增加后退方法（项目中统一使用该方法）
Vue.prototype.$pageBack = (index, path, params) => {
  store.commit('UPDATE_DIRECTION', {direction: 'reverse'});
  if(path) {
    // 允许后退到指定的页面
    router.push({path: path, query: params});
  } else {
    index = index || 1;
    let currentName= router.history.current.name;
    let firstPage = sessionStorage.getItem('firstPage');
    // 防止后退退出应用
    if(firstPage == currentName && currentName != 'index'){
        sessionStorage.setItem('firstPage', "index");
        router.push({path:'/'})
        return false
    }else{
        router.go(-index)
    }
  }
}
2. 增加前进方法（项目中统一使用该方法）
Vue.prototype.$pageInit = (path, params, isReplace) => {
  store.commit('UPDATE_DIRECTION', {direction: 'forward'});
  params = params || {};
  if(isReplace) {
    router.replace({
      path: path,
      query: params
    });
  } else {
    router.push({
      path: path,
      query: params
    });
  }
}

3.去除组件缓存中的某个标识（如果需要某个页面组件重新初始化数据，可执行该方法，flag可传入多个name，使用逗号分隔）
Vue.prototype.removeCacheComponentFlag = (flag) => {
  let cacheComponents = store.state.cacheComponents;
  const arr = flag ? flag.split(',') : [];
  arr.map((name, index) => {
    delete cacheComponents[flag];
  })
  store.commit("SAVE_CATCH_COMPONENTS", cacheComponents);
}

4.是否需初始化页面（将状态isInitPage储存起来）
Vue.prototype._isInitPage = (to) => {
  let cacheComponents = store.state.cacheComponents;
  let direction = store.state.direction;
  let name = to.name;
  let keepAlive = to.meta.keepAlive;
  if(direction == 'forward' || (direction == 'reverse' && !cacheComponents[name])) {
    store.commit("CHANGE_STATE", {"isInitPage": true});
  } else {
    store.commit("CHANGE_STATE", {"isInitPage": false});
  }
  // 储存已缓存组件标识
  if(keepAlive && !cacheComponents[name]) {
    cacheComponents[name] = true;
    store.commit("SAVE_CATCH_COMPONENTS", cacheComponents);
  }
}
5.在router.beforeEach函数上处理，判断即将要跳转的页面是否需要重新初始化
router.beforeEach((to, from, next) => {
     // 在next之前执行
    // 判断下一页是否需要重新初始化
    window.vm && window.vm._isInitPage(to);
})

6. 增加公共方法执行
// 增加mixin.js文件（可以分别针对全局和局部封装对应的mixin）
export const mixin = {
  activated() {
    if(this.isInitPage) {
        // 重新初始化数据
       Object.assign(this.$data, this.$options.data());
        
        // 需要重新执行初始化
        // 在methods中增加init方法
        if(typeof(this.init) == 'function') {
            this.init();
        }
    } else {
        // 不需要重新执行初始化，但允许操作方法
        // 在methods中增加noLoad方法
        if(typeof(this.noLoad) == 'function') {
            this.noLoad();
        }
    }
  },
  mounted() {
    // 兼容处理keepAlive为false的情况
    if(!this.$route.meta.keepAlive) {
        if(typeof(this.init) == 'function') {
            this.init();
        }
    }
  },
 computed: {
    ...mapState([
      'isLogin',
      'lc_client_no',
      'user_id',
      'userInfo',
      'isInitPage'
    ]),
    constants(){
      return constants;
    }
  },
  methods: {
    ...mapMutations([
      'CHANGE_STATE'
    ])
  }
}

// 在页面组件中引入mixin（其实可全局引入）
import {mixin} from '@/assets/mixin.js'
export default {
    mixins: [mixin],
    ....
}
  • 使用该方法需要注意以下几点
1. 配置路由时，尽可能都设置为keepAlive为true，统一化处理，也为后期组件开发带来一定的便利性，如可以直接抛弃created/mounted方法
2. 由于设置为缓存页面，故封装的子组件（可以视为所有非页面组件的其它组件），最好用监听父组件传来的一个属性方法来控制页面初始化。如监听isLoad属性，一旦变为true则初始化
3.如果后退需要刷新数据的，可以通过设置状态值，然后再noLoad方法中处理重新加载数据，或者处理状态值中的cacheComponents，去掉返回页对应的标识（需要知道返回哪一页的前提）
缓存页与非缓存页动画效果乱问题
  • 在入口文件app.vue处理
<template>
    <div id="app" v-if="!isRemoveCatchPage">
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <keep-alive>
            <router-view class='router-view' v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
          </keep-alive>
        </transition>
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <router-view class='router-view' v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
        </transition>
    </div>
</template>

// 设置data数据
isRemoveCatchPage: false,
transitionName : 'pop-' + (this.direction === 'forward' ? 'in' : 'out')
// watch监听路由状态
$route(to, from) {
    to = to || {};
    if (to.name == 'index') {
        this.transitionName = 'fade'
    } else {
        this.transitionName = 'pop-' + (this.direction === 'forward' ? 'in' : 'out');
    }
}
// 添加方法
beforeEnter: function (el) {
  el.removeAttribute("data-animation");
},
beforeLeave: function (el) {
  el.removeAttribute("data-animation");
  if(this.direction == 'reverse') {
    // 返回，添加一个比重高的样式替换缓存的样式
    el.setAttribute("data-animation", this.transitionName + "-leave-active");
  } else if(this.direction == 'forward') {
    // 前进，添加一个比重高的样式替换缓存的样式
    el.setAttribute("data-animation", this.transitionName + "-leave-active");
  }
}
  • 通过样式的比重来解决动画效果错乱
提供完整的app.vue文件
<template>
    <div id="app" v-if="!isRemoveCatchPage">
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <keep-alive>
            <router-view class='router-view' v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
          </keep-alive>
        </transition>
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <router-view class='router-view' v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
          <!-- <router-view class='router-view' v-if="isRouterAlive"></router-view> -->
        </transition>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import Vue from "vue"
    export default {
        data(){
            return{
                name: "测试话说",
                isRouterAlive: true,
                isRemoveCatchPage: false,
                transitionName : 'pop-' + (this.direction === 'forward' ? 'in' : 'out')
            }
        },
        mounted(){
        },
        computed:{
            ...mapState([
              'direction',
              'isReload',
              'is_remove_catche_page'
            ])
        },
        methods: {
          beforeEnter: function (el) {
            el.removeAttribute("data-animation");
          },
          beforeLeave: function (el) {
            el.removeAttribute("data-animation");
            if(this.direction == 'reverse') {
              // 返回，添加一个比重高的样式替换缓存的样式
              el.setAttribute("data-animation", this.transitionName + "-leave-active");
            } else if(this.direction == 'forward') {
              // 前进，添加一个比重高的样式替换缓存的样式
              el.setAttribute("data-animation", this.transitionName + "-leave-active");
            }
          },
        },
        watch: {
            $route(to, from) {
                to = to || {};
                if (to.name == 'index') {
                    this.transitionName = 'fade'
                } else {
                    this.transitionName = 'pop-' + (this.direction === 'forward' ? 'in' : 'out');
                }
            },
            isReload(value) {
              // 一旦发生变化则重载组件
                this.isRouterAlive = false;
                this.$nextTick(() => {
                  this.isRouterAlive = true;
                })
            },
            is_remove_catche_page(value) {
              // 一旦发生变化则重载组件
                this.isRemoveCatchPage = true;
                this.$nextTick(() => {
                  this.isRemoveCatchPage = false;
                })
            }
        }

    }
</script>

<style>
    #app{
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .pop-out-enter-active,
    .pop-out-leave-active,
    .pop-in-enter-active,
    .pop-in-leave-active {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow-x: hidden;
        overflow-y: auto;
        will-change: opacity,transform;
        transition: all 0.3s;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s;
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }
    .pop-out-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    body [data-animation = 'pop-out-leave-active'], .pop-out-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .pop-in-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    body [data-animation = 'pop-in-leave-active'], .pop-in-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .vux-loading .weui-toast{
        top: 250px;
    }
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349