vue-navigation

    1.1.4 • Public • Published

    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

    Install

    npm i vue-navigation

    DownloadsWeekly Downloads

    245

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    65.6 kB

    Total Files

    33

    Last publish

    Collaborators

    • zack24q