vue-keep-navigator

一个用于 Vuejs 的，基于浏览器历史记录的路由导航器。

---

功能特性

• 缓存页面，可以实现页面前进刷新、后退不刷新
• 可以为路由前进、后退添加不同的过渡动画
• 保持与浏览器一致的历史访问记录（即使刷新页面也可以保持正确的前进、后退过渡动画）

用法

安装

npm install vue-keep-navigator
# OR
yarn add vue-keep-navigator

使用

main.js

import Vue from 'vue';
import VueKeepNavigator from 'vue-keep-navigator';

// router: new VueRouter()
Vue.use(VueKeepNavigator, { router });

App.vue

<template>
  <div id="app">
    <keep-navigator>
      <router-view />
    </keep-navigator>
  </div>
</template>

过渡动画：可以通过 $router.isForward 判断路由是否前进来执行不同的动画

<template>
  <div id="app">
    <transition mode="out-in" :name="$router.isForward ? 'slide-left' : 'slide-right'">
      <keep-navigator>
        <router-view class="view" />
      </keep-navigator>
    </transition>
  </div>
</template>

API

Vue.use(VueKeepNavigator, options);

options 说明：

属性	类型	默认值	说明
router	object	-	【必填】vue-router 实例，vue-keep-navigator 依赖于 vue 路由实例
key	string	_sk	给路由追加的键值名称，用于区分页面地址
mode	string	stack	导航模式，可选 stack、cache ； stack ：页面前进刷新、后退不刷新（使用缓存）； cache ：无论页面是前进还是后退，只要缓存可用将从缓存恢复页面； 2 种模式均可触发 activated 和 deactivated 钩子函数，因此当页面从缓存恢复时可通过 activated 更新页面数据
keepAlive	boolean	true	是否缓存页面，仅当 mode: 'cache' 模式有效。在路由 meta.keepAlive 值缺省时使用
disableFirstActivated	boolean	true	首次打开页面是否禁用 activated 钩子的执行。因 activated 钩子函数在 mounted 之后执行，所以不适于页面首次加载时用来获取数据
localCache	boolean	false	是否启用本地缓存历史记录，为 true 时，即使刷新页面也可以保持正确的前进、后退过渡动画

keep-navigator 组件参数

属性	类型	默认值	说明
max	number string	-	一个（字符串）数字，指定最多可以缓存多少页面实例。 一旦这个数字达到了，在新页面实例被创建之前，已缓存页面中最久没有被访问的实例会被销毁掉，但是不会影响前进、后退的效果

Licence

MIT