https://github.com/zack24q/vue-navigation

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

cache navigation page vue vue-router

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zack24q/vue-navigation
• Owner: zack24q
• License: mit
• Created: 2017-03-17T08:22:41.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-28T06:53:42.000Z (about 6 years ago)
• Last Synced: 2024-10-28T07:42:17.301Z (16 days ago)
• Topics: cache, navigation, page, vue, vue-router
• Language: JavaScript
• Homepage:
• Size: 2.2 MB
• Stars: 1,018
• Watchers: 43
• Forks: 184
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-navigation

[![npm](https://img.shields.io/npm/dm/vue-navigation.svg)](https://www.npmjs.com/package/vue-navigation)

[![npm](https://img.shields.io/npm/v/vue-navigation.svg)](https://www.npmjs.com/package/vue-navigation)

[![npm](https://img.shields.io/npm/l/vue-navigation.svg)](https://www.npmjs.com/package/vue-navigation)

[![Github file size](https://img.shields.io/github/size/zack24q/vue-navigation/dist/vue-navigation.esm.min.js.svg)](https://github.com/zack24q/vue-navigation/blob/master/dist/vue-navigation.esm.min.js)

> require [vue](https://github.com/vuejs/vue) `2.x` and [vue-router](https://github.com/vuejs/vue-router) `2.x`.

[中文文档](https://github.com/zack24q/vue-navigation/blob/master/README_CN.md)

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

[DEMO](https://zack24q.github.io/vue-navigation/examples/)

[CODE](https://github.com/zack24q/vue-navigation/tree/master/examples)

## Installing

```bash

npm i -S vue-navigation

```

or

```bash

yarn add vue-navigation

```

## Usage

### Basic Usage

main.js

```javascript

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

```vue

  

    

  

```

### Use with vuex2

main.js

```javascript

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.

## Options

Only `router` is required.

```javascript

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

```

## 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

```javascript

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', () => {})

```

## Methods

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

- `getRoutes()` get the routing records

- `cleanRoutes()` clean the routing records