The library is a navigation manager, it is similar to native mobile app.
require vue
2.xand vue-router2.x.
- support cache last view
- A forward to B，then forward to C;
- C back to B，B will recover from cache;
- B back to A，A will recover from cache;
- A forward to B again，B will rebuild, not recover from cache.
- support mutiple pages of same type
- A1 and A2 are the same component pages
- A1 forward to B，then forward to A2
- A2 back to B，B will recover from cache;
- B back to A1，A1 will recover from cache;
- A1 and A2 are different instance
- support single task like android app
- A forward to B，then forward to C, A is single
- C forward to A, C and B is destroyed
npm install --save vue-navmain.js
import Vue from 'vue' import router from './router' // vue-router instance import Navigation from 'vue-nav' // use plugin Vue.use(Navigation, {router})App.vue
<template> <navigation> <router-view></router-view> </navigation> </template><script> import ... export default { name: 'login', stackType: 'single' ... } </script>main.js
import Vue from 'vue' import router from './router' // vue-router instance import store from './store' // vuex store instance import Navigation from 'vue-nav' // install plugin Vue.use(Navigation, {router, store})App.vue
You can use stack.direction to control transition. 'stack.direction' is mapped from vuex state
<template> <transition :name="'router-' + stack.direction"> <navigation> <router-view></router-view> </navigation> </transition> </template> <script> export default { .... computed: { ...mapState([ 'stack' ]) } .... } </script> <style> .router-backward-enter-active, .router-forward-enter-active, .router-backward-leave-active, .router-forward-leave-active { will-change: transform; transition: all 500ms ease-out; height: 100%; width: 100%; position: absolute; backface-visibility: hidden; } .router-backward-enter { opacity: 1; transform: translate3d(-50%, 0, 0); } .router-backward-leave-active { opacity: 0.5; z-index: 100; transform: translate3d(100%, 0, 0); } .router-forward-enter { opacity: 1; transform: translate3d(100%, 0, 0); } .router-forward-leave-active { opacity: 0.5; transform: translate3d(-50%, 0, 0); } </style>