vue-navigation-stack

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

Usage no npm install needed!

<script type="module">
  import vueNavigationStack from 'https://cdn.skypack.dev/vue-navigation-stack';
</script>

README

写在前面

  1. 从开始使用 vue 起就在使用 vue-navigation 组件,但是因为路由链接不是很美观一直想去除,所以用 vue-navigation 修改了这个版本;
  2. 为了 npm 可以发布, 所以修改了包名为 vue-navigation-stack,版本号从1.0.0-beta起始;
  3. 当前组件与 vue-navigation 除了路由链接不一样,其他功能表现一致,但为了不与 vue-navigation 冲突请使用时自定义组件名称。



原始版本 vue-navigation

npm npm npm Github file size

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

DEMO

CODE

Installing

npm i -S vue-navigation

or

yarn add vue-navigation

Usage

Basic Usage

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>

Use with vuex2

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.

Options

Only router is required.

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