hash和histroy
Vue路由的原理
Vue单页面应用（SPA）从头到尾就一个页面。但是有部分区域可能需要变化（呈现不同组件），通过匹配浏览器地址栏中的路径，来展示不同的组件，路由就是干这么个事情。
把握两个问题：很重要很重要！不然根本记不住！
- 两种模式怎么监听地址的变化？
- 两种模式怎么改变路径？
hash模式
原理
使用这种模式，浏览器地址栏会有一个#，通过监控hash值（#后面的部分）来做路径的改变。
1.当hash值发生变化之后，触发hashchange事件，回调函数里面匹配我们配置的路由，进行组件展示。（路由变化时）
2.当window的load事件触发的时候，触发回调函数，回调函数里面匹配我们配置的路由，进行组件展示。（页面初次渲染时）
histroy模式
通过监控浏览器地址栏的location.pathname来做路径改变。
当监控到location.pathname发生变化之后，使用H5的history API来改变路径，比如pushState replaceState,go,back。
总结
主要
- hash通过监测浏览器地址栏的哈希值，history通过监测浏览器地址栏的location.pathname
- hash通过监听触发hashchange事件，然后触发里面的回调函数来实现页面的跳转，history通过H5的API来实现路由的路由的匹配
- 在hash不会返回404,histroy匹配不到会返回404，所以一般需要后端配置，当前端请求地址不存在的时候，默认返回index.html
针对第三点的解释
hash: 因为hash通过匹配hash值，不会发送请求，直接由vue-router接管，不会出现找不到资源的情况，因为#前面有根路径，肯定会匹配到页面。
history: 如果刷新了，或者在浏览器URL中输入了错误的地址，按了enter，浏览器就会向服务器发送请求，这个时候找不到就会404！不是说前进后退或者点击页面切换组件会404，这都是配好的咋会404啊，都不会请求服务器，直接vue-router接管。
总之，SPA应用，就是做组件切换，vue路由接管。
次要
- hash有#,history没有#，hash比较丑
- hash兼容性好，history兼容性不好，因为要用到H5的API
