vue-page-navigation v0.0.5

vue-page-navigation

Vue 单页应用导航管理器，像原生 app 一样管理页面栈而不是销毁。

功能特性

• 基于vue-router进行扩展，原有导航逻辑不变
• 参考keep-alive源码，实现include、exclude、max属性
• push或者forward的时候重新渲染页面，cache 中会添加新渲染的页面
• back或者go（负数）的时候先前的页面不会渲染，而是从cache中读取缓存，并且这些页面保留着之前的内容状态，并且把不用的页面从cache中移除
• replace会更新cache中的当前页面
• 回退到之前页面的时候有activated钩子函数出发
• 支持浏览器的前进后退

安装和用法

安装

npm install vue-page-navigation

使用

import Vue from 'vue'
import VuePageNavigation from 'vue-page-navigation';

// vue-router实例必须传入
Vue.use(VuePageNavigation, { router });

// App.vue
<template>
  <div id="app">
    <VuePageNavigation>
      <router-view ></router-view>
    </VuePageNavigation>
  </div>
</template>

use Vue.use to install `vue-page-navigation 使用之前需要注册插件

Vue.use(VuePageNavigation, options);

Options 说明：

注册的时候可以指定 VuePageStack 的名字和 keyName

Vue.use(VuePageNavigation, { router, name: 'VuePageNavigation', keyName: 'PNK' });

组件输入属性，与keep-alive相似

使用组件可以指定输入属性

<VuePageNavigation :inlcude="include" :exclude="exclude" :max="50">
  <router-view ></router-view>
</VuePageNavigation>

相关说明

keyName

为什么会给路由添加keyName这个参数，是为了支持浏览器的后退，前进事件，这个特性在 webApp,微信公众号和小程序很重要

原理

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

感谢

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

License

MIT