作用
- vue 是单页面应用，只是页面内容的动态替换，不能进行浏览器前进后退，使用 vue-router 实现了这个功能
- 使用路由的关系将访问路径与组件联系起来，让单页面开发更加便捷灵活
为什么不能用 a 标签
传统页面应用存在多个页面，可以使用 a标签 来实现页面切换和跳转
而 vue 做的是单页面应用，相当于只有一个 index.html 页面，用 a标签 不起作用
路由原理
更新视图但不重新请求页面，实现单页面前端路由有两种方式
hash 模式
hash 模式是开发中默认的模式，它的 url 中带有一个 "#" ，# 及其后面的值就是对应的 hash 值
hash 值会出现在 url 中，但不会出现在 http 请求中，所以对后端不会产生影响，改变 hash 值也就不会重新加载页面。但 hash 值的变化会在浏览器中记录下来，因此浏览器也可以根据这个变化实现页面的前进和后退
API
hash 的获取可以通过 location.hash，hash 的改变通过 window.onhashchange 这个事件
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
}history 模式
是传统的路由分发模式，url 中不带 "#" 号
用户输入一个 url，服务器会接收请求并解析这个 url，然后做出响应的逻辑处理
一般需要后台配置支持，如果后台没有正确配置，使用 history 模式访问会返回 404 错误，后台需将请求重定向到对应的页面
API
获取也是 location.history
切换历史状态：（浏览器的前进，后退及跳转）对象针对 window.history
- forward()
- back()
- go()
修改历史状态：包括了 H5 新增的 pushState(data[,title][,url]) 和 replaceState() 方法
——虽然修改了 URL，但浏览器不会立即像后端发送请求（location.href 和 location.replace 切换时要向服务器发送请求，而 pushState 和 replace 仅修改 url，除非主动发起请求）
history.state //是一个属性，可以得到当前页的 state 信息
区别
- 带不带 "#" 号
- 是否对后端造成影响（history 对应的 404）
- pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL，而 hash 只能修改 "#" 后面的部分（当前 URL 同文档）
- pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈
- pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串
动态路由
$router和 $route
● $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数
● $router 是 " 路由实例 " 对象包括了路由的跳转方法，钩子函数等
贡献者
jiechen