1、Vue Router的定义
Vue Router是Vue.js官方的路由管理器，它是Vue.js的核心深度集成，让构建单页面应用变得很轻松。
2、Vue路由的安装和配置
2.1 安装vue路由
npm install vue-router --save-dev
2.2 配置vue路由
其中VueRouter是为了之后处理组件的路由的
3、路由
路由中有三个基本的概念 route，routes，router
1. route：它是一条路由，就是一个路径和组件的映射关系
2. routes：是一组路由，把每条route的路由组合起来，形成一个数组
3. router：它是一个路由机制，相当于一个管理者，它来管理路由，因为routes只是定义了一组路由，也就是相当于路由映射表，相当于一组路径和组件的对应关系，当用户点击了按钮，改变了一个路径，router会去负责处理路径，去显示不同的组件。
4、路由的基本使用
4.1 内置的两个组件
router-link组件说明：
1. router-link是vue-router已经注册好的组件，直接使用就可以
2. router-link是用来切换路由的，通过to属性来跳转到指定的路由
3. router-link在编译的时候会自动的被编译为a标签，可以使用tag属性指定编译为你想要的标签（ < router-link tag="span" to="/about" ></router-link> ）
router-view组件说明：
1. router-view用来指定当前路由所映射的组件显示的位置
2. router-view可以理解为占位符，为路由映射的组件占位，不同路由映射的组件通过替换显示
3. 和动态组件的效果类似
4.2 路由的相关目录
4.3 路由示例
最后，我们发现Vue路由默认使用的是 hash 路由
5、 路由的配置
5.1 根路由的配置
参考上面的示例中，在配置路由映射的时候，配置了 /home，/about路由
我们在每次打开页面时，默认的访问的路径是 / ，这条路径并没有映射任何组件内容，因此，router-view组件占位的地方不会显示任何内容，因此我们需要配置根路由显示的内容！
两种解决方案：
1. 配置路由组件（配置根路由 / 显示的组件）
2. 配置路由重定向（使用redirect字段配置路由重定向）推荐！
5.2 路由模式
路由模式共有两种：1. 通过hash值 2. 通过H5的history，但是Vue默认使用的是 hash 模式。
hash路由中使用history模式的设置：
VueRouter配置项中处理提供一个routes用来配置路由映射表,还提供了一个mode选项用来配置路由模式
6、完全匹配和匹配
最后再讲一下路由的完全匹配和匹配的样式修改的问题
看到的是两个类名：router-link-exact-active和router-link-active
1. router-link-exact-active：完全匹配样式，当点击的路由和path路径完完全全匹配时，会加入的样式
2. router-link-active：匹配即会触发的样式，如（根路径 / 和其他的路径 /home ，这时根路径就会加入匹配样式类）
