前言
今天花一天时间阅读完Vue Router的官方文档的基础部分，简单的做一下总结和记录
Vue Router是什么
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用(SPA)。地址栏url的变化并不会去发请求去服务器取新的页面，而是按需加载局部组件，看起来就像无刷新一样。包括的功能包括：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
实际上路由的用途是用路由配置表来控制 url 对应的跳转地址，地址对应的可以是基础视图组件或者布局组件，可以用于灵活的视图导航。
安装
直接下载 / CDN
下载地址：https://unpkg.com/vue-router/dist/vue-router.js
然后通过js引入进来：<script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script>NPM
安装npm包：
npm install vue-router然后通过Vue.use()引入：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
基本用法
Vue Router的API和Vuex类似，new VueRouter 构建出一个路由实例，然后提供了<router-link> 组件用于写链接，<router-view> 组件用于展示，Router的构建选项中最重要的就是 routes ，它用来定义路由的规则。
一个简单的路由例子：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div> // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！动态路由
通过使用:动态路径参数来做动态路由，使用通配符 (*)来匹配任意路径，作为捕获任意路径和404路径。详细请参考：链接地址
嵌套路由
路由是支持嵌套的，routes中的 children 配置用来写嵌套路由配置，然后嵌套的路由可以在组件的 <router-view> 做嵌套展示。
编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。主要采用router.push(location, onComplete?, onAbort?)这个方法，另外还提供了router.replace(location, onComplete?, onAbort?) ，router.go(n)这两个不常用的方法，具体用法参考：链接地址
命名路由
除了直接用 path 指定路由的路径外，可以用 name 给路由取一个别名方便使用，具体参考：链接
命名视图
可以给视图也取名字方便使用， router-view 组件的 name 属性指定，不给的话默认为 default 名字的。
重定向和别名
重定向也是通过 routes 配置来完成，配置采用 redirect 。例子：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})别名采用 alias 来命名。
路由组件传参
使用 props 将组件和路由解耦，让路由可以传参数给组件，达到动态配置目的。例子：
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})props 可以是布尔、对象和函数，具体用法参考：链接地址
HTML5 History 模式
vue-router 默认 hash 模式 ，会让url地址里面带有#符号，非常丑陋而且让锚点语法无法使用，所以需要 history 模式，例子：
const router = new VueRouter({
mode: 'history',
routes: [...]
})路由懒加载
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载(路由被访问的时候才加载对应组件)。例子：
routes: [
{
path: "/user",
component: () =>
import(/* webpackChunkName: "layout" */ "./layouts/UserLayout")
}
]路由的其他主题
其他主题包括：
对于这些主题，感兴趣的可以再点击链接学习，根据2/8定律，不作为学习的重点，用到再看。