wangying3426 / vue-navigation

A page navigation library, record routes and cache pages, like native app navigation. 一个页面导航库，记录路由并缓存页面，像原生APP导航一样。

vue-navigation

require vue 2.x and vue-router 2.x.

中文文档

vue-navigation default behavior is similar to native mobile app (A、B、C are pages):

1. A forward to B，then forward to C;
2. C back to B，B will recover from cache;
3. B back to A，A will recover from cache;
4. A forward to B again，B will rebuild, not recover from cache.

!important: Because the browser does not provide page forward and backward events, so the library needs to maintain a routing record to determine the forward and backward behavior, so the current routing records are not allowed to contain duplicate routes, and now forward to the existing route will be identified as backward behavior

DEMO

DEMO

CODE

Installing

npm i -S vue-navigation

Usage

Basic Usage

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>

Events

functions: [ on | once | off ]

event types: [ forward | back | refresh | reset ]

parameter( to | from ) properties:

• name
  • type: string
  • desc: name of the component corresponding to the route
• route:
  • type: object
  • desc: vue-route`s route object

this.$navigation.on('forward', (to, from) => {})
this.$navigation.once('back', (to, from) => {})
this.$navigation.off('refresh', (to, from) => {})
this.$navigation.on('reset', () => {})

Use with 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...

After passing in store, vue-navigation will register a module in store (default module name is navigation), and commit navigation/FORWARD or navigation/BACK or navigation/REFRESH when the page jumps.

You can set the name of the module yourself:

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

Methods

Use Vue.navigation in global environment or use this.$navigation in vue instance

• getRoutes() get the routing records
• cleanRoutes() clean the routing records