Vue的两种路由模式： hash、history；默认是hash模式； 前端路由（改变视图的同时不会向后端发出请求）
一、什么是hash模式和history模式？
hash模式：是指url尾巴后的#号以及后面的字符。hash也称为锚点，本身是用来做页面定位的，它可以使对应的id元素显示在可视区域。hash虽然出现在url中，但不会被包括在http请求中，对后端完全没有影响，因此改变hash不会被重新加载页面。
hash值的变化不会导致浏览器向服务器发出请求，而hash改变会触发hashchange事件(只改变#后面的url片段)；hash发生变化url都会被浏览器记录下来，从而可以使用浏览器的前进和后退。又称为前端路由，单页面应用的标配。
history模式：
二、hash和history模式背后的原理？
hash：hashchange事件，可以在window对象上监听这个事件:
window.location.hash = 'qq' // 设置url的hash，会在当前的url后加上'#qq'
ar hash = window.location.hash // 值为 '#qq' window.addEventListener('hashchange',function() { // 监听hash变化，点击浏览器的前进后退会触发 })
history：利用了HTML5新增的pushState()和replaceState()方法，需要特定的浏览器支持；
--history 的api可以分为两个部分：切换和修改（参考MDN）
--切换历史状态包括backforwardgo 方法： history.go()history.forward()history.back()
==修改历史状态包括pushState和replaceState两个方法
window.history.pushState(state, title, url) // state: 需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取 // title：标题，一般为null // url：设定新的历史记录url。新的url与当前的url的origin必须时一样的，url可以是绝对路径也可以是相对路径 // 例如：当前的url: https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/, // 执行 history.pushState(null, null, '/qq/'),则会变成https://baidu.com/qq/ window.history.replaceState(state,title,url) // 与pushState方法一样，但它是修改当前的历史记录，而pushState是创建新的历史记录
window.addEventListener('popstate',function(){ // 监听浏览器的前进和后退事件，pushState和replaceState方法不会触发 })
// history模式：改变url的方式会导致浏览器向服务器端发送请求，我们需要在服务器端做处理：如果匹配不到任何的静态页面，则应该始终返回同一个html页面。搭配前端路由的404页面支持。
hash和history都是属于浏览器自身的特性，Vue-router只是利用了这两个特性（通过调用浏览器接口）来实现前端路由。
三、缺点：
hash：
1.本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了；
2.传参是基于url的，如果传递复杂的数据，会又体积的限制，而history模式不仅可以在url里放参数，还可以将数据放在一个特定的对象中。
history：页面F5书刷新时会出现404； 前端的 URL 必须和实际向后端发起请求的 URL 一致，否则会返回404错误。