1、认识vue-router
目前前端流行的三大框架，都有自己的路由实现：
Angular的ngRouter
React的ReactRouter
Vue的vue-router
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/
vue-router是基于路由和组件的
路由用户设定访问路径的，将路径和组件映射起来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换
vue-router是基于路由和组件的
- 路由用户设定访问路径的，将路径和组件映射起来。
- 在vue-router的单页面应用中，页面的路径的改变就是组件的切换
2、安装和使用vue-router
第一步：安装vue-router
npm install vue-router --save
第二步：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
导入路由对象，并且调用Vue.use(VueRouter)
创建路由实例，并且传入路由映射配置
在Vue实例中挂载创建的路由实例
使用vue-router的步骤：
第一步：创建路由组件
第二步：配置路由映射：组件和路径映射关系
第三步：使用路由：通过<router-link>和<router-view>
代码实现步骤：
- 创建router实例
- 挂载到Vue实例中
- 第一步：创建路由组件
- 第二步：配置组件和路由的映射关系
- 第三步：使用路由
-
<router-link>：该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签。
<router-view>：该标签会根据当前的路径，动态渲染出不同的组件
3、路由的默认路径
默认情况下，进入网站的首页，我们希望渲染首页的内容。
但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。
如何可以让路径默认跳转到首页，并且渲染首页组件呢？
我们需要多配置一个映射就可以了
{ path: '/', redirect: '/home' },
配置解析：
- 我们在routes中又配置一个映射
- path配置的是根路径：/
- redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了。
4、HTML5的History模式
改变路径的方式有两种：
- URL 的 hash
- HTML5 的 history
- 默认情况下，路径的改变使用的URL的 hash
如果希望使用HTML5的history模式，进行如下的配置：
5、router-link属性介绍
to：用于指定跳转的路径
tag：tag可以指定<router-link>之后渲染成什么组件，比如我们下面的代码会被渲染成一个<li>元素，而不是<a> 。 如：<router-link to='/home' tag='li'>
replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
6、路由代码跳转
有的时候，页面的跳转可能需要执行相应的JavaScript代码，这个时候，就可以使用第二种跳转方式了。
比如我们将代码修改如下：
