一个 web App，它无非就是一系列的页面，每个页面具有特定的展示与交互

那如何才能到达我们想要的页面？怎么从一个页面跳转到另一个页面？

vue-router就是来处理这件事的

1. 为 vue 实例注入 router

vue-router是Vue.js官方的路由管理器

我们还是打开vue-cli生成的这个项目

进入到 src/main.js

1
2
3
4
5
6
7
8
9
10
11
12

import Vue from 'vue'
import App from './App'
import router from './router' // 看这里，引入了一个叫 router 的模块，似乎是我们想找的

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

上面代码的第3行import router from './router'，引入了一个 router

第9行代码，这个router被注入到了这个 vue 实例中

（在 es6 中，如果属性名与变量名相同，可以简写。如 { router: router } 简写为 { router } ）

这样一来，这个路由就可以作用于我们的项目了

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

那这个 router 究竟是怎么配置的呢？

2. vue-router

顺着import router from './router'，我们找到 src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

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

第2行 import Router from 'vue-router'，先引入了vue-router

然后在第5行，通过Vue.use(Router)把vue-router这个插件注册一下

接下来就是router 实例的创建

在 new Router 的时候，传入了一个 routes 数组。很明显，这个 routes 就是项目的路由配置了

routes 数组里的一个元素就对应一个路由。

每个路由应该映射一个组件，比如说路径是 / 对应着组件 HelloWorld（对应着两个问题：在哪里？显示什么？）

到这里，我们大概了解了 vue-router 是如何工作的

流程

• src/main.js（new Vue 的时候注入 router

• src/router/index.js （配置路由，生成 Router 实例

• src/components/HelloWorld.vue （创建组件，用于路由的配置，与某一路径形成映射