A page navigation library record routes and cache pages

by Vue.js Examples

vue-navigation

A page navigation library, record routes and cache pages, like native app navigation.

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

A forward to B, then forward to C;
C back to B, B will recover from cache;
B forward to C again, C will rebuild, not recover from cache;
C forward to A, A will build, now the route contains two A instance.

!important: vue-navigation adds a key to the url to distinguish the route. The default name of the key is VNK, which can be modified.

Live Demo

https://zack24q.github.io/vue-navigation/examples/
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>

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.

GitHub