第三方导航库vue-navigation的使用

• 实现前进刷新，后退不刷新。
• 前进、后退分别使用不同的过场动画。

什么是 vue-navigation?

（1）vue-navigation 是一个基于 vue 与 vue-router 的第三方导航库。
（2）与 keep-alive 相似，vue-navigation 可以保存页面状态。
（3）比 keep-alive 强的是，vue-navigation 保存状态是可以识别路由的前进后退的。其导航默认行为类似手机 APP 的页面导航（假设 A、B、C 为页面）：

• A 前进到 B，再前进到 C；
• C 返回到 B 时，B 会从缓存中恢复；
• B 再次前进到 C，C 会重新生成，不会从缓存中恢复；
• C 前进到 A，A 会生成，现在路由中包含 2 个 A 实例。

使用

1、安装

npm i -S vue-navigation

2、配置使用

（1）首先在 main.js 文件中引入并启用导航组件：

import Vue from 'vue'
import App from './App'
import router from './router'
import Navigation from 'vue-navigation'
 
Vue.use(Navigation, {router})
 
Vue.config.productionTip = false
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

注意：vue-navigation 在 url 中添加了一个 key 来区分路由。key 的名称默认为 VNK，我们可以将其修改成其他的。

Vue.use(Navigation, {router,keyName: 'hangge'})

（2）如果项目还用到了 vuex，我们可以使用如下方式启用导航组件，传入 store 后：

• vue-navigation 会向 store 注册一个 Module（Module 的默认名称为 navigation）。
• 同时在页面跳转时会提交 navigation/FORWARD 或 navigation/BACK 或 navigation/REFRESH。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' // vuex store 实例
import Navigation from 'vue-navigation'
 
Vue.use(Navigation, {router, store})
 
Vue.config.productionTip = false
 
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

注意：Module 的默认名称同样是可以更改的。

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

（3）然后在 App.vue 中使用 组件将 router-view 包裹起来即可。

<template>
  <div id="app">
    <navigation>
      <router-view/>
    </navigation>
  </div>
</template>

3、路由改变的事件响应

vue-navigation 提供了许多事件监听方法，我们可以在不同的事件响应方法中执行不同的功能操作（比如前进或后退使用不同的动画）

（1）vue-navigation 支持如下 5 种事件类型的监听：

• forward：前进
• back：后退
• replace：替换
• refresh：刷新
• reset：重置

（2）而监听方法有 on()、once()、off() 这 3 种，每个方法都有 to、from 这个两个参数（分别代表来源路由、目标路由），to、from 参数内属性如下：

• name：路由的名称（包含 key，类型为 string）
• route：vue-route 的路由信息对象

<template>
  <div id="app">
    <navigation>
      <router-view/>
    </navigation>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  created() {
      // bind event
      this.$navigation.on('forward', (to, from) => {
        console.log('forward to', to, 'from ', from)
      })
      this.$navigation.on('back', (to, from) => {
        console.log('back to', to, 'from ', from)
      })
      this.$navigation.on('replace', (to, from) => {
        console.log('replace to', to, 'from ', from)
      })
      this.$navigation.on('refresh', (to, from) => {
        console.log('refresh to', to, 'from ', from)
      })
      this.$navigation.on('reset', () => {
        console.log('reset')
      })
      // and use [once, off] methods
      this.$navigation.once('forward', () => {
        console.log('appear once')
      })
      const off = () => {
        console.log('will not appear')
      }
      this.$navigation.on('forward', off)
      this.$navigation.off('forward', off)
    }
}
</script>

4、组件方法

• getRoutes()：获取路由记录
• cleanRoutes()：清空路由记录

//在全局环境中使用 Vue.navigation 进行调用：
Vue.navigation.cleanRoutes();

//在 Vue 实例中使用 this.$navigation 进行调用：
this.$navigation.cleanRoutes();