[[442954]]

為什么推薦使用 hash 模式?

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

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

一、實(shí)現(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 還可以對瀏覽器歷史記錄棧進(jìn)行修改。

hash 與 history 區(qū)別對比：

二、為什么推薦使用 hash 模式?

理由：

1、從兼容角度分析。

hash 可以兼容到 IE8，而 history 只能兼容到 IE10。

2、從網(wǎng)絡(luò)請求的角度分析。

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

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

3、服務(wù)器配置角度分析。

hash 不需要服務(wù)器任何配置。

history 進(jìn)行刷新頁面時(shí)，無法找到url對應(yīng)的頁面，會(huì)出現(xiàn) 404 問題。因?yàn)橛蛎竺娴穆酚墒怯汕岸丝刂频模蠖酥荒鼙Ａ粲蛎糠?，所以就?huì)造成頁面丟失的問題，需要服務(wù)器端添加一個(gè)回退路由，就能解決該問題了。

hash 模式不足

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

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

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