【vue-page-stack】Vue 单页应用导航管理器 正式发布

[20191031更新]解决页面A->页面A的场景问题

[20190828更新]适配vue-router 3.1.x

中间由于弄比较复杂的在线聊天，耽误了一个月，抱歉。先说下结果，目前已经在多个环境下通过验证，包括ios、Android、微信公众号、微信小程序(对，小程序也能搞纯H5项目)，都是较复杂的业务，全都是在webview下的纯H5单页项目，可以完美解决咱们业务上的需求。

在npm上推送了1.0.0版本，咱们内部项目已经开始正式使用。欢迎使用，欢迎Star，但愿能帮到你。

项目地址

不了解解决了什么问题的小伙伴能够看看前情提要

性能

先说一下你们最关心的性能问题，比Vue自带的keep-alive组件要好不少，由于keep-alive缓存一次以后在keep-alive组件destroyed以前全部的缓存是不会销毁的，可是vue-page-stack是根据UI层级关系进行缓存和销毁的。下面使用vue-devtool展现二者的不一样

经过上图咱们能够清楚地看见激活组件和缓存组件的状态， vue-page-stack将栈上的UI存储，回退的时候再拿出来激活，而且将不用的组件缓存清除；而 keep-alive会把你激活过的全部组件都缓存下来

原理

上次也说过了，是参考的keep-alive的代码，下面粘出部分代码，以供参考

render() {
  let key = this.$route.query[keyName];
  const slot = this.$slots.default;
  // 获取当前页面的vnode
  const vnode = getFirstComponentChild(slot);
  if (!vnode) {
    return vnode;
  }
  // 查看当前页面是否有缓存
  let index = getIndexByKey(key);
  if (index !== -1) {
    // 有缓存的话就取出缓存，而且清除排在他后面的全部vnode
    vnode.componentInstance = stack[index].vnode.componentInstance;
    // destroy the instances that will be spliced
    for (let i = index + 1; i < stack.length; i++) {
      stack[i].vnode.componentInstance.$destroy();
      stack[i] = null;
    }
    stack.splice(index + 1);
  } else {
    // 没有缓存就是新的页面，须要存储或者是replace当前页面
    if (history.action === config.replaceName) {
      // destroy the instance
      stack[stack.length - 1].vnode.componentInstance.$destroy();
      stack[stack.length - 1] = null;
      stack.splice(stack.length - 1);
    }
    // 向栈里面push
    stack.push({ key, vnode });
  }
  vnode.data.keepAlive = true;
  return vnode;
}
复制代码

Vue 单页应用导航管理器

---

功能特性

• 🐉在vue-router上扩展，原有导航逻辑不变
• ⚽push或者forward的时候从新渲染页面，Stack中会添加新渲染的页面
• 🏆back或者go(负数)的时候不会从新渲染，从Stack中读取先前的页面，会保留好先前的内容状态，例如表单内容，滚动条滑动的位置等
• 🏈back或者go(负数)的时候会把不用的页面从Stack中移除
• 🎓replace会更新Stack中当前页面
• 🎉回退到以前页面的时候有activited钩子函数触发
• 🚀支持浏览器的后退，前进事件
• 🍕支持响应路由参数的变化，例如从 /user/foo 导航到 /user/bar，组件实例会被复用
• 🐰提供路由方向的变化，能够在前进和后退的时候添加不一样的动画

安装和用法

安装

npm install vue-page-stack
# OR
yarn add vue-page-stack
复制代码

使用

import Vue from 'vue'
import VuePageStack from 'vue-page-stack';

// vue-router is necessary
Vue.use(VuePageStack, { router }); 
复制代码

// App.vue
<template>
  <div id="app">
    <vue-page-stack>
      <router-view ></router-view>
    </vue-page-stack>
  </div>
</template>
复制代码

CDN

<script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>
复制代码

Vue.use(VuePageStack.default, { router });
复制代码

API

注册插件

注册的时候能够指定VuePageStack的名字和keyName

use Vue.use to install vue-page-stack 使用以前须要注册插件

Vue.use(VuePageStack, options);
// example
Vue.use(VuePageStack, { router });
复制代码

Options 说明：

Attribute	Description	Type	Accepted Values	Default
router	vue-router instance	Object	vue-router instance	-
name	VuePageStack name	String	'VuePageStack'	'VuePageStack'
keyName	stack-key name	String	'stack-key'	'stack-key'

注册的时候能够指定VuePageStack的名字和keyName

Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
复制代码

前进和后退

若是想在页面前进或者后退的时候添加一些动画，能够经过stack-key-dir进行判断

// App.vue
$route(to, from) {
  if (to.params['stack-key-dir'] === 'forward') {
    this.transitionName = 'forward';
  } else {
    this.transitionName = 'back';
  }
}
复制代码

example

相关说明

keyName

为何会给路由添加keyName这个参数，是为了支持浏览器的后退，前进事件，这个特性在webApp,微信公众号和小程序很重要。目前没找到代替的办法，若是有思路欢迎讨论哈。

原理

获取当前页面实例部分参考了Vue源码中keep-alive的部分

感谢

这个插件同时借鉴了vue-navigation和vue-nav，很感谢他们给的灵感。