下面整理根据官方文档以及自我理解整理，如有不足，请指教。
下面是来自一段官方的原话。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
来一个简单的栗子
1 js 2 // 引入vue 3 // 引入vue-router， 假如是模块化编程，需要Vue.use(VueRouter)来使用插件 4 5 // 1、引入组件，定义也可 6 import Bar from './Bar' 7 8 9 10 11 // 2、定义路由 12 const routes = [ 13 {path: '/bar', component:Bar} 14 ] 15 16 // 3、创建一个router实例，然后传入routes 17 18 const router = new VueRouter({ 19 router 20 }) 21 22 // 4、创建跟实例并挂载 23 cosnt app = new Vue({ 24 router 25 }).$mount('#app')
这样一个简单的路由就实现了，可以在vue的根实例就来访问路由。比如：this.$router,this.$route
this.$router: 表示用来访问路由器
this.$route: 表示当前路由
比如：this.$router.go(-1) 用来后退一步，而this.$route.params查看当前路由url的参数
这里的this.$router和上诉代码的router实例其实是一致的，如：也可以直接使用上面的router实例来进行操作，当然这样的话，就需要在每一个需要使用路由的地方来引入路由，这样的话略显麻烦。所以还是采取使用this.$router来使用的比较方便。
另一个概念：视图
视图：路由匹配到的组件讲渲染到改视图处，这往往很有用，比如将一个页面切分成很多区域，实际路由实际去刷新那一部分区域即可。
1 <div class="app"> 2 <p> 3 <!-- 使用 router-link 组件来导航. --> 4 <!-- 通过传入 `to` 属性指定链接. --> 5 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 6 <router-link to="/bar">Go to Bar</router-link> 7 </p> 8 <!-- 路由出口 --> 9 <!-- 路由匹配到的组件将渲染在这里 --> 10 <router-view></router-view> 11 </div>
动态路由：上面的路由都是写死的，比如/bar，但实际业务可能不止这样，所以可以使用动态路由来进行匹配
1 const City = { 2 template: '<div>城市名字： {{$route.params.cityname}}</div>' 3 } 4 5 const router = new VueRouter({ 6 routes: [ 7 // 动态路由的参数，由冒号开头表示 8 { path: '/city/:cityname'， component: City} 9 ] 10 }) 11 12 // 这样，当路由访问到/city/广州，这样模板中，就会渲染出城市的名字，所以可以用$route.params来获取动态参数。
动态路由是可以嵌套的。
如：/city/:cityname/select/:select_id, 这里就有两个动态路由了。对应的cityname和select_id的值都会设置到$route.params中。
通配符匹配：可以使用*来匹配任意路径，这往往是有用的，毕竟谁也不想用户直接看到404状态码。
1 { 2 // 这样会匹配所有的路径 3 path: '*' 4 } 5 6 // 通配符的位置需要放置路由的最后。 7 // 这里因为路由匹配的规则是根据路由定义的先后来跳转的 8 9 // 所以下面这种是错误的，会一直匹配到* 10 cosnt error = { 11 template: '<div>嘿，这里不是你该来的</div>' 12 } 13 14 const routes = [ 15 { 16 path： ‘*’， 17 component: error 18 }, 19 { 20 // 正常路由 21 path: '/city‘, 22 component: xxx 23 } 24 ] 25
所有为了避免这种情况，还是把通配符放最后吧。
1 // 这样就正常了 2 const routes = [ 3 { 4 // 正常路由 5 path: '/city‘, 6 component: xxx 7 }, 8 { 9 path： ‘*’， 10 component: error 11 } 12 ]
这里就关于路由的匹配优先级的问题，路由的优先级是根据定义的顺序来排的
在使用通配符的时候，$route.params会自动添加一个pathMatch的参数，包含着URL通过通配符的部分。
1 // 如果按照上诉的路由 2 this.$router.push(/cityname) // 由于没有该路由，所以匹配通配符 3 this.$route.params.pathMatch // ’cityname‘
嵌套路由：嵌套路由属于经常通用的情况，毕竟/aaa显示一个组件,/aaa/bbb显示是另一个组件，所以嵌套来使路由便于管理
1 const router = new VueRouter({ 2 routes: [ 3 { path: /city/:id, component: City, 4 children: [{ 5 // 当路由进入 /city/:id/post 匹配成功 6 // 注意这里不能写/post，这样会直接匹配到根路由，也就失去了嵌套路由的意义 7 path: 'post'， 8 component；CityPost 9 }] 10 } 11 ] 12 }) 13 14 // 嵌套路由使用children作为子级的路由，这样可以嵌套多层路由，子子孙孙孙孙孙无穷尽
编程式内容：
导航路由的时候，我们可以使用<router-link :to="xxx">来渲染成a标签来进行导航，可以使用this.$router的方法进行导航。
router的方法是效仿 window.history的api
router.push(location, onComplete, onAbort)
--location（路由地址）是必选的，其他两个是回调方法，在新版本中，会直接返回一个promise，直接.then来进行回调就可
// 推入路由来显示，vue-router的路由模式应该是根据栈来设计的（不知道，瞎讲的，没看过源码）
// 打脸了，还真是栈，不过是history栈，这个方法会向history栈，推入一条记录。
所以<router-link :to=“xxx”>和router.push(“xxx”) 是一样的。
--location: 这个参数可以是一个字符串路径，也可以是一个对象
1 // 字符串 2 router.push(’city‘) 3 4 // 对象 5 router.push({path: 'ciry'}) 6 7 // 命名路由, 相当于给路由定义一个名字，需要在路由那边使用name来定义 8 router.push({name: 'user', params: {userId: '123'}}) 9 // 这里为什么使用path呢，由于使用path的话，params会被忽略掉，因为参数本来就是路径的一部分，所以要写满带参数的路径 10 // 如： 11 router.push({ path: `/user/${userId}` }) 12 13 14 15 // 带查询参数，变成 /register?plan=private 16 router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location, oncomplete, onAbort)
参数上同，不同点，在于不会像history添加新纪录，而是替换掉
<router-link :to="" replace> // 声明式
router.go(n)
--n是一个整数，用来表示在history中前进或者后退几步，和window.history.go(n)原理,超出记录的长度则失败
命名路由：通过来个路由起一个别名来进行访问
1 // 上诉代码块中，使用名字，是需要像下面这样使用name来定义就可 2 const router = new VueRouter({ 3 routes: [ 4 { 5 path: '/user/:userId', 6 name: 'user', 7 component: User 8 } 9 ] 10 })
命令视图：视图时路由的出口，组件渲染在这里，但是视图可以有多个，来渲染多个组件.
router-view中使用name属性来定义，默认不填为default
路由配置时，使用components来配置（需要添加s）
1 const router = new VueRouter({ 2 routes: [ 3 { 4 path: '/', 5 components: { 6 default: Foo, 7 a: Bar, 8 b: Baz 9 } 10 } 11 ] 12 })
重定向：重新定位到另一个位置,在路由配置中使用redirect：'路径xxx'来声明