vue-navigation

必须配合 vue2.x 与 vue-router2.x 一起使用

导航默认行为类似手机APP的页面导航（A、B、C为页面）：

1. A前进到B，再前进到C
2. C返回到B时，B的状态从缓存中恢复
3. B返回到A时，A的状态从缓存中恢复
4. A再次前进到B时，B重新生成，不从缓存中恢复

在线演示

演示地址

代码地址

安装

npm i -S vue-navigation

使用

基础使用

main.js

import Vue from 'vue'
import router from './router' // vue-router instance
import Navigation from 'vue-navigation'

Vue.use(Navigation, {router})
// bootstrap your app...

App.vue

<template>
  <navigation>
    <router-view></router-view>
  </navigation>
</template>

在全局环境中调用Vue.navigation.getRoutes()或在Vue实例中调用this.$navigation.getRoutes()都可以获取页面导航路径

搭配vuex2使用

main.js

import Vue from 'vue'
import router from './router' // vue-router instance
import store from './store' // vuex store instance
import Navigation from 'vue-navigation'

Vue.use(Navigation, {router, store})
// bootstrap your app...

传入store后，vue-navigation会向store注册一个Module（默认名称为navigation），并在routes中存储页面导航路径，同时在页面跳转时会提交navigation/FORWARD或navigation/BACK

你可以自己设置Module的名称

Vue.use(Navigation, {router, store, moduleName: 'name'})