Vue keepAlive 实现页面缓存功能

前言

产品中有用到Hybrid技术，目前使用Vant+Vue实现H5的模块开发功能，可以看 DSBridge在项目中实现跨平台交互这篇写的关于我们产品中混合开发的实现思路。

由于自己是主攻原生开发，H5的话也只是堪堪入了个门，本文的也仅仅是记录开发中遇到的问题，以及解决方案。

遇到的问题

当前新建页面填写了一些东西，然后跳转人员选择页面去选择人员，当从人员选择页面回来后，之前新建页填写的内容已经消失。

使用 VueRouter 进行页面的跳转：

push页面：
this.$router.push({
    name: "PersonForeign",
    params: {
        pkValue: this.pkValue,
        tblNam: this.tblNam,
    }
});
pop页面：
this.$router.go(-1);

解决方案 keepAlive

keep-alive-control.js

export default {
    beforeRouteLeave: function (to, from, next) {
        if (to.name === 'List' || to.name === 'Detail') {//此处判断是如果返回上一层，你可以根据自己的业务更改此处的判断逻辑，酌情决定是否摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive) {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
                    if (this.$vnode.componentOptions) {
                        var key = this.$vnode.key == null
                            ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                            : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys = this.$vnode.parent.componentInstance.keys;
                        if (cache[key]) {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
}

index.js

配置每个页面路由参数

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../pages/Main.vue'
import List from '../pages/List.vue'
import ForeignList from '../pages/ForeignList.vue'
import WorkFlow from '../pages/WorkFlow.vue'
import FlowHistory from '../pages/FlowHistory.vue'
import Login from '../pages/Login.vue'
import WordList from '../pages/WordList'

Vue.use(VueRouter)

const routes = [
  {
    path: '/workflow',
    name: 'WorkFlow',
    component: WorkFlow,
    meta: {
      keepAlive: true
    }
  },

  
  {
    path: '/wordlist',
    name: 'WordList',
    component: WordList,
    meta: {
      keepAlive: true
    }
  },



  {
    path: '/login/:pgmId/:userId/:seed',
    name: 'Login',
    component: Login,
  },
  {
    path: '/list/:pgmId',
    name: 'List',
    component: List
  },
  {
    path: '/detail/:pgmId/:pkValue',
    name: 'Detail',
    component: Main,
    meta: {
      keepAlive: true
    }
  },
  {
    path: '/foreignlist',
    name: 'ForeignList',
    component: ForeignList
  },

  {
    path: '/flowhistory/:tblNam/:pkValue',
    name: 'FlowHistory',
    component: FlowHistory
  },
]

const router = new VueRouter({
  mode: 'hash',
  routes
})

export default router

App.Vue

修改 App.Vue 中缓存逻辑

<template>
  <div id="app">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件！ -->
          </router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive">
          <!-- 这里是不被缓存的视图组件！ -->
        </router-view>
  </div>
</template>