[[442954]]

為什么推薦使用 hash 模式?

創(chuàng)建項目時，vue-router 默認使用 hash 模式，設置模式的時候到底該使用hash還是history模式呢?

先了解它們的實現(xiàn)原理，搞清楚之間的區(qū)別，就知道什么時候該選擇什么模式了。

一、實現(xiàn)原理

hash 原理

hash 通過監(jiān)聽瀏覽器 onhashchange 事件變化，查找對應路由應用。通過改變 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)絡請求的角度分析。

使用 hash 模式，地址改變時通過 hashchange 事件，只會讀取哈希符號后的內(nèi)容，并不會發(fā)起任何網(wǎng)絡請求。

而 history 模式，每訪問一個頁面都要發(fā)起網(wǎng)絡請求，每個請求都需要服務器進行路由匹配、數(shù)據(jù)庫查詢、生成HTML文檔后再發(fā)送響應給瀏覽器，這個過程會消耗服務器的大量資源，給服務器的壓力較大。

3、服務器配置角度分析。

hash 不需要服務器任何配置。

history 進行刷新頁面時，無法找到url對應的頁面，會出現(xiàn) 404 問題。因為域名后面的路由是由前端控制的，后端只能保留域名部分，所以就會造成頁面丟失的問題，需要服務器端添加一個回退路由，就能解決該問題了。

hash 模式不足

1、hash 模式中的 # 也稱作錨點，這里的的 # 和 css 中的 # 是一個意思，所以在 hash 模式內(nèi)，頁面定位會失效。

2、hash 不利于 SEO(搜索引擎優(yōu)化)。

3、白屏時間問題。瀏覽器需要等待 JavaScript 文件加載完成之后渲染 HTML 文檔內(nèi)容，用戶等待時間稍長。