Github
Live Demo

主要修改了 keepAlive 的缓存机制, 可以像 APP 那样前进刷新, 返回销毁, 支持动态路由和功能性路由

keepalive.gif

改变了keepAlive的缓存机制, 可以像 APP 那样前进重建, 返回销毁
不过目前仅仅用于Page级别, 也就是一级路由, 其他级路由似乎没有需要
原本的keepAlive默认是以componentName来做缓存的 key
当然如果有vnode.key的话则会使用vnode.key, 所以网上很多通过$route.fullPath当作 key
可以实现params/query的变更新建组件, 但是无法做到返回销毁
如果使用$destroy()去手动销毁, 但是keepAlive里面还是存在缓存标记
导致从 3 级路由返回到 2 级路由时拿缓存的instance是失效的, 进而导致重建
所以通过Page前进返回行为分析, 总结出 key 的生成规则

解决的痛点

1. 子路由的更新和父级路由无关, 所以一级路由的缓存 key 是命中路由的父一级路由相关, 目前是父路由的 path + 父子路由相同的 params
2. 还有就是自己功能性路由的支持
3. 1. 比如使用支持返回键的 imgsViewer, 需要 history 压栈而不触发 forward/backward 事件, 所以提供了 ignorePaths 参数
4. 1. 比如子路由不使用 router-view 来渲染, 而是使用 view-pager 来自行控制,
      支持左右滑动切换, 如果 view-pager 的页面状态是需要保存到 url, 则需要一级路由的一个动态路由占位符, 充当子路由, 所以提供了 ignoreParams 参数

Props

参数	类型	默认值	可选值	描述
ignorePaths	Array, String, RegExp			忽略符合条件的 URL，不压栈
ignoreParams	Array, String			忽略动态路由参数，不参与 key 的构成

Events

事件名	参数	描述
init	Info	组件初始化的时候
forward	Info	路由前进的时候
replace	Info	路由替换的时候
backward	Info	路由返回的时候

Event Params: Info

参数	类型	描述
fromPath	String	变化前 path
nextPath	String	变化后 path
fromRouterKey	String	变化前 key
nextRouterKey	String	变化后 key

注: vc-keep-alive 将会把历史栈储存在 SessionStorage 的__VCKEEPALIVE__字段里

Demo Code

npm install vc-keep-alive

<template>
  <div id="app" :class="pageAct">
    <transition name="page-slide">
      <vc-keep-alive
        :ignorePaths="ignorePaths"
        :ignoreParams="ignoreParams"
        @init="log('init', $event)"
        @forward="log('forward', $event)"
        @replace="log('replace', $event)"
        @backward="log('backward', $event)"
      >
        <router-view />
      </vc-keep-alive>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue';
import VcKeepAlive from 'vc-keep-alive';

Vue.use(VcKeepAlive);

export default {
  data() {
    return {
      pageAct: '',
      ignorePaths: ['popup='],
      ignoreParams: ['pagerTab']
    };
  },

  methods: {
    log(act, args) {
      console.log(act, args);
      this.pageAct = 'page-' + act;
    }
  }
};
</script>

TODO

License

MIT 一起来扣细节~