Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/zack24q/vue-navigation below:

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

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 forward to C again, C will rebuild, not recover from cache;
4. 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

CODE

or

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>

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.

Only router is required.

Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})

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.$navigation.on('forward', (to, from) => {})
this.$navigation.once('back', (to, from) => {})
this.$navigation.on('replace', (to, from) => {})
this.$navigation.off('refresh', (to, from) => {})
this.$navigation.on('reset', () => {})

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4