vue-router是什么？
我们可以很快的回答出：它是一个路由管理器，这里指的路由就是SPA（单页面应用）的路径管理器， 换句话说，vue-router就是WebApp的链接路径管理系统。
那么我们肯定要问？为什么要用它？它和我们以往用的路由跳转有什么区别？
我们以往的传统的页面应用，是用一些超链接来实现页面切换和跳转的，而vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
所以在vue-router的单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，你显示的内容都是在这个index.html下来控制隐藏 / 显示的。所以必须使用vue-router来进行管理。
首先，我们可以来了解一下，什么是SPA：
一. SPA (single page application)
SPA是指单一页面应用程序，有且只有一个完整的页面；当它在加载页面的时候，不会加载整个页面的内容，而只更新某个指定的容器中内容。
它的核心就是 —— 更新视图而不重新请求页面，同样的，这也是vue-router的核心原理
而vue-router给我们提供了三种不同的路由加载方式：
- Hash模式 - 使用URL的hash值来做路由（默认模式）
- History模式 - 依赖 HTML5 History API 和服务器配置，查看 HTML5 History 模式。
- Abstract模式: 支持所有 JavaScript 运行环境，如 Node.js 服务器端
二. Hash模式
hash所表示的即浏览器url中#后面的内容，包含#，hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。 也就是说明：
- #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中，不包含#。
- 每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。
所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。
三. History模式
HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
但是 history模式也有一点小问题，就是需要服务器端的支持。
举个🌰：
hash模式下 —— xxx.com/#/id=5 请求地址为 xxx.com,没有问题。
history模式下 —— xxx.com/id=5 请求地址为 xxx.com/id=5，如果后端没有对应的路由处理，就会返回404错误；
为了应对这种情况，需要后台配置支持： 在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
四. Abstract模式
abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。
根据平台差异可以看出，在 Weex 环境中只支持使用 abstract 模式。 不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以 在使用 vue-router 时只要不写 mode 配置即可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。 （当然，你也可以明确指定在所有情况下都使用 abstract 模式）。
