关于vue-入口app.vue文件的配置

转至：http://www.hangge.com/blog/cache/detail_2133.html

Vue.js - 路由 vue-router 的使用（vue-navigation插件的使用）

在之前的文章中我介绍了 vue-router 结合  组件从而实现页面缓存的功能。但默认情况下，在发生路由跳转后，我们代码中是不知道这个跳转属于前进还是后退，这样对于一些特殊需求就不好实现了，比如：

实现前进刷新，后退不刷新。

前进、后退分别使用不同的过场动画。

虽然我们可以通过在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 的页面导航（假设 A、B、C 为页面）：

A 前进到 B，再前进到 C；

C 返回到 B 时，B 会从缓存中恢复；

B 再次前进到 C，C 会重新生成，不会从缓存中恢复；

C 前进到 A，A 会生成，现在路由中包含 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: ''

})

注意：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。

main.js中代码则引入store组件，如下：

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

})

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

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

引入 vuex的方法

安装 : npm install vuex --save 

使用: 然后我们在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：

store中index.js文件的初始配置

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

二、使用样例

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）

步骤2（step2.vue）

步骤3（step3.vue）

三、路由改变的事件响应

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

1，功能说明

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

forward：前进

back：后退

replace：替换

refresh：刷新

reset：重置

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

name：路由的名称（包含 key，类型为 string）

route：vue-route 的路由信息对象

2，使用样例

（1）这里我们修改 App.vue 代码，监听常用的事件并输出到控制台。

（2）我们从步骤 1 -> 步骤 2 -> 步骤 3，接着再一步步回退到步骤 1，控制台输出如下：

四、组件方法

1，方法介绍

vue-navigation 提供了如下两个方法可以对路由记录进行操作：

getRoutes()：获取路由记录

cleanRoutes()：清空路由记录

2，使用说明

（1）在全局环境中使用 Vue.navigation 进行调用：

Vue.navigation.cleanRoutes();

（2）在 Vue 实例中使用 this.$navigation 进行调用：

this.$navigation.cleanRoutes();