当前位置: > > > Vue.js - 路由 vue-router 的使用详解7(vue-navigation插件的使用)

Vue.js - 路由 vue-router 的使用详解7(vue-navigation插件的使用)

    在之前的文章中我介绍了 vue-router 结合 <keep-alive> 组件从而实现页面缓存的功能。但默认情况下,在发生路由跳转后,我们代码中是不知道这个跳转属于前进还是后退,这样对于一些特殊需求就不好实现了,比如:
  • 实现前进刷新,后退不刷新。
  • 前进、后退分别使用不同的过场动画。
虽然我们可以通过在 url 中添加一个 key,或者使用 meta 配置层级的方法来实现区分,但总归不方便。其实使用 vue-navigation 这个第三方组件可以完美解决这个问题。

一、基本介绍

1,什么是 vue-navigation?

(1)vue-navigation 是一个基于 vue vue-router 的第三方导航库。
(2)与 keep-alive 相似,vue-navigation 可以保存页面状态。
(3)比 keep-alive 强的是,vue-navigation 保存状态是可以识别路由的前进后退的。其导航默认行为类似手机 APP 的页面导航(假设 ABC 为页面):
  • A 前进到 B,再前进到 C
  • C 返回到 B 时,B 会从缓存中恢复;
  • B 再次前进到 CC 会重新生成,不会从缓存中恢复;
  • C 前进到 AA 会生成,现在路由中包含 2 A 实例。

2,安装方法

进入 vue 项目文件夹后执行如下命令进行安装:
npm i -S vue-navigation

3,配置方法

(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 注册一个 ModuleModule 的默认名称为 navigation)。
  • 同时在页面跳转时会提交 navigation/FORWARDnavigation/BACKnavigation/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 中使用 <navigation> 组件将 router-view 包裹起来即可。
<template>
  <div id="app">
    <navigation>
      <router-view/>
    </navigation>
  </div>
</template>

二、使用样例

1,效果图

  • 项目中共有“步骤1”“步骤2”“步骤3”这个 3 个页面(默认加载步骤1
  • 当从步骤 2 返回步骤 1 时,步骤 1 之前的内容数据仍然保留。同样从步骤 3 返回步骤 2 时,步骤 2 之前的内容数据仍然保留。
  • 而从步骤 3 跳转到步骤 1 时,步骤 1 会重新生成(不显示之前数据)。同样从步骤 1 前进到步骤 2、步骤 2 前进道步骤 3,这些下一步页面也是重新生成。

2,样例代码

  • 路由配置(router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import step1 from '@/components/step1'
import step2 from '@/components/step2'
import step3 from '@/components/step3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2
    },
    {
      path: '/step3',
      name: 'step3',
      component: step3
    }
  ]
})

  • 步骤1(step1.vue
<template>
  <div>
    <h1>步骤一</h1>
    <input type="text" name="" value=""><br><br>
    <button @click="gotoNextStep">下一步</button>
  </div>
</template>

<script>
export default {
  name: 'step1',
  methods: {
    gotoNextStep() {
      this.$router.push('/step2');
    }
  }
}
</script>

  • 步骤2(step2.vue
<template>
  <div>
    <h1>步骤二</h1>
    <input type="text" name="" value=""><br><br>
    <button @click="gotoPrevStep">上一步</button>
    <button @click="gotoNextStep">下一步</button>
  </div>
</template>

<script>
export default {
  name: 'step2',
  methods: {
    gotoPrevStep() {
      this.$router.go(-1);
    },
    gotoNextStep() {
      this.$router.push('/step3');
    }
  }
}
</script>

  • 步骤3(step3.vue
<template>
  <div>
    <h1>步骤三</h1>
    <input type="text" name="" value=""><br><br>
    <button @click="gotoPrevStep">上一步</button>
    <button @click="gotoStep1">回到首页</button>
  </div>
</template>

<script>
export default {
  name: 'step2',
  methods: {
    gotoPrevStep() {
      this.$router.go(-1);
    },
    gotoStep1() {
      this.$router.push('/');
    }
  }
}
</script>

三、路由改变的事件响应

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

1,功能说明

(1)vue-navigation 支持如下 5 种事件类型的监听:
  • forward:前进
  • back:后退
  • replace:替换
  • refresh:刷新
  • reset:重置

(2)而监听方法有 on()once()off() 3 种,每个方法都有 tofrom 这个两个参数(分别代表来源路由、目标路由),tofrom 参数内属性如下:
  • name:路由的名称(包含 key,类型为 string
  • routevue-route 的路由信息对象

2,使用样例

(1)这里我们修改 App.vue 代码,监听常用的事件并输出到控制台。
<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>

(2)我们从步骤 1 -> 步骤 2 -> 步骤 3,接着再一步步回退到步骤 1,控制台输出如下:

四、组件方法

1,方法介绍

vue-navigation 提供了如下两个方法可以对路由记录进行操作:
  • getRoutes():获取路由记录
  • cleanRoutes():清空路由记录

2,使用说明

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

(2)在 Vue 实例中使用 this.$navigation 进行调用:
this.$navigation.cleanRoutes();
评论0