# vue-navigation

> A page navigation library, built with vue2 and vue-router2.

Latest version **1.1.4** (published 2018-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-navigation
pnpm add vue-navigation
yarn add vue-navigation
bun add vue-navigation
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2018-09-04 |
| First published | 2017-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 64 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1017 |
| Author | zack |
| Maintainers | zack24q |
| Keywords | navigation, vue, vue-router |

## Links

- npm: https://www.npmjs.com/package/vue-navigation
- Repository: https://github.com/zack24q/vue-navigation
- Homepage: https://github.com/zack24q/vue-navigation#readme
- Issues: https://github.com/zack24q/vue-navigation/issues
- npm.io page: https://npm.io/package/vue-navigation

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.1.4 (latest) — 2018-09-04
- 1.0.0-beta.3 (next) — 2017-07-28
- 1.1.3 — 2017-10-16
- 1.1.2 — 2017-09-25
- 1.1.1 — 2017-08-11
- 1.1.0 — 2017-08-10
- 1.0.0 — 2017-07-28
- 1.0.0-beta.2 — 2017-07-28
- 1.0.0-beta.1 — 2017-07-28
- 0.5.1 — 2017-07-24
- 0.5.0 — 2017-07-13
- 0.4.0 — 2017-06-29
- 0.3.0 — 2017-06-26
- 0.2.2 — 2017-06-22
- 0.2.1 — 2017-05-11
- … 5 more at https://npm.io/package/vue-navigation/versions

## 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 (tag)](https://img.shields.io/npm/v/vue-navigation/next.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
<template>
  <navigation>
    <router-view></router-view>
  </navigation>
</template>
```

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

---
_Source: https://npm.io/package/vue-navigation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._