我們都知道單頁應用的路由有兩種模式：hash 和 history利花，那么它們的工作原理是是什么？
瀏覽器提供的路由跳轉API：location與history
location與history都是瀏覽器的對象：window.location與window.history堆生。
window.location對象
通過改變其屬性值修改頁面的 url盈匾。我們在單頁應用中需要做到的是改變 url 不刷新頁面。
- location.href：可以改變hash值而不刷新頁面裙椭；
- location.hash：可以改變hash值而不刷新頁面；
- location.search：會刷新頁面署浩，改變的是?后面部分揉燃；
- location.pathname：會刷新頁面，改變的域名部分筋栋；
window.history對象
history 接口是 HTML5 新增的炊汤，它有兩個方法可以改變 url 而不刷新頁面。
- history.pushState(state,title,url)
- history.replaceState()：方法的參數(shù)同上弊攘，區(qū)別說它修改瀏覽器歷史中當前歷史記錄抢腐。
url變化監(jiān)聽
當路由發(fā)生變化的時候我們需要得知這個變化并且調用相應的功能模塊，那么這個變化是如何被監(jiān)聽到的呢肴颊？事實上是通過瀏覽器的兩個事件來做到的氓栈。
- hashchange事件能監(jiān)聽 url hash 的改變；
- popstate事件能監(jiān)聽除 history.pushState() 和 history.replaceState() 外 url 的變化婿着；
// hash模式
window.addEventListener("hashchange", function(e) {
console.log(e);
});
// history模式
window.addEventListener("popchange", function(e) {
console.log(e);
});
hash 模式和 history 模式的選擇
history模式：前端的url必須和實際向后端發(fā)起請求的url 一致授瘦。
hash模式對SEO不友好。
- 在 hash 模式時不使用 history.pushState() 和 history.replaceState() 方法竟宋，就只需要在 hashchange 事件回調里編寫 url 改變時的邏輯就行了提完；
- 而 history 模式下，我們不僅要在 popstate 事件回調里處理 url 的變化丘侠，還需要分別在 history.pushState() 和 history.replaceState() 方法里處理 url 的變化徒欣。而且 history 模式還需要后端的配合，不然用戶刷新頁面就只有 404 可以看了蜗字；
Vue中路由模式的配置
export default new Router({
mode: 'hash', // 或者history
routes: [
{
path: '/',
name: 'home',
component: Home
}
])
