###一、什么是Vue Router？
Vue Router是一个实现客户端路由的JavaScript库，它可以基于Vue.js框架进行客户端中的浏览器路由控制，可以帮助开发者跟踪用户在该网站中的行为，提供桌面应用程序和移动设备上的有效导航功能，并在客户端更新数据存储而无需刷新网页。
###二、安装
Vue Router需要Vue.js为2.0版以上进行安装：
```
npm install vue-router
```
###三、基本使用
根实例中添加路由
要在Vue程序中使用Vue Router，首先需要在根实例中注入Vue Router，这样Vue Router就能通过组件中的 `$router` 访问到Vue Router实例：
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
// ...
})
new Vue({
router,
// ...
}).$mount('#app')
```
添加路由规则
同一个Vue Router实例可以包括多个路由规则，每一个路由规则被定义成一个javascript对象，每个对象都可以包括路径(path)和组件(component)两个属性：
```
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
```
###四、实例
我们来举一个例子，以便你对Vue Router有一个大概的了解：
首先，在根文件中引入Vue、Vue Router，并指定router的路径和组件
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', component: HomeComponent },
{ path: '/page1', component: Page1Component },
{ path: '/page2', component: Page2Component }
]
})
new Vue({
router,
// ...
}).$mount('#app')
```
然后，在三个组件中，分别引用不同的router-link和router-view对象
HomeComponent.vue
```
```
Page1Component.vue
```
```
Page2Component.vue
```
```
最终，将实例化的router传递给Vue根实例就OK了
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeComponent from './components/HomeComponent.vue'
import Page1Component from './components/Page1Component.vue'
import Page2Component from './components/Page2Component.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', component: HomeComponent },
{ path: '/page1', component: Page1Component },
{ path: '/page2', component: Page2Component }
]
})
new Vue({
router,
// ...
}).$mount('#app')
```
###五、模式
Vue Router支持两种路由模式：
1. HTML5 History模式：这种模式下，你可以结合HTML5 History API实现真实URL，并利用前进后退按钮来进行路由的切换
2. Hash模式：这种模式下，URL的改变不会引起浏览器跳转，而是会产生一个正则的hash值，以#开头，后面跟着路由的路径。