為什么推薦使用 hash 模式?
創(chuàng)建項目時，vue-router 默認使用 hash 模式，設(shè)置模式的時候到底該使用hash還是history模式呢?
先了解它們的實現(xiàn)原理，搞清楚之間的區(qū)別，就知道什么時候該選擇什么模式了。
一、實現(xiàn)原理
hash 原理
hash 通過監(jiān)聽瀏覽器 onhashchange 事件變化，查找對應(yīng)路由應(yīng)用。通過改變 location.hash 改變頁面路由。
history 原理
利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法，改變頁面路徑。
history Interface 是瀏覽器歷史記錄棧提供的接口，可通過 back、forward、go 等，可以讀取歷覽器歷史記錄棧的信息，pushState、repalceState 還可以對瀏覽器歷史記錄棧進行修改。
hash 與 history 區(qū)別對比：
二、為什么推薦使用 hash 模式?
理由：
1、從兼容角度分析。
hash 可以兼容到 IE8，而 history 只能兼容到 IE10。
2、從網(wǎng)絡(luò)請求的角度分析。
使用 hash 模式，地址改變時通過 hashchange 事件，只會讀取哈希符號后的內(nèi)容，并不會發(fā)起任何網(wǎng)絡(luò)請求。
而 history 模式，每訪問一個頁面都要發(fā)起網(wǎng)絡(luò)請求，每個請求都需要服務(wù)器進行路由匹配、數(shù)據(jù)庫查詢、生成HTML文檔后再發(fā)送響應(yīng)給瀏覽器，這個過程會消耗服務(wù)器的大量資源，給服務(wù)器的壓力較大。
3、服務(wù)器配置角度分析。
hash 不需要服務(wù)器任何配置。
history 進行刷新頁面時，無法找到url對應(yīng)的頁面，會出現(xiàn) 404 問題。因為域名后面的路由是由前端控制的，后端只能保留域名部分，所以就會造成頁面丟失的問題，需要服務(wù)器端添加一個回退路由，就能解決該問題了。
hash 模式不足
1、hash 模式中的 # 也稱作錨點，這里的的 # 和 css 中的 # 是一個意思，所以在 hash 模式內(nèi)，頁面定位會失效。
2、hash 不利于 SEO(搜索引擎優(yōu)化)。
3、白屏?xí)r間問題。瀏覽器需要等待 JavaScript 文件加載完成之后渲染 HTML 文檔內(nèi)容，用戶等待時間稍長。
原文鏈接：https://www.toutiao.com/a7036636201742238241/
