Vue-router(前端路由)的两种路由模式

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）

　　--切换历史状态包括back\forward\go 方法： 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错误。