vue-navigation
require vue
2.x
and vue-router2.x
.
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.
DEMO
Installing
npm i -S vue-navigation
or
yarn add vue-navigation
Usage
Basic Usage
main.js
Vue// bootstrap your app...
App.vue
<template> <navigation> <router-view></router-view> </navigation></template>
Use with vuex2
main.js
Vue// 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.
Options
Only router
is required.
Vue
Events
functions: [ on
| once
| off
]
event types: [ forward
| back
| replace
| refresh
| reset
]
parameter( to
| from
) properties:
name
- type: string
- desc: name of the route(contains the key)
route
- type: object
- desc: vue-route`s route object
this$navigationthis$navigationthis$navigationthis$navigationthis$navigation
Methods
Use Vue.navigation
in global environment or use this.$navigation
in vue instance.
getRoutes()
get the routing recordscleanRoutes()
clean the routing records