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 说明：

keep-navigator 组件参数

Licence

MIT