帶你了解 Vue-Router 的兩種路由模式
Vue-Router有兩個路由模式，分別是哈希hash模式和歷史history模式，然后默認(rèn)的是哈希hash模式。
現(xiàn)在有個問題是，我們了解這兩個模式的區(qū)別嗎?或者只是了解它的路徑上有沒有 # 這個符號的區(qū)別嗎?
hash模式
hash模式是開發(fā)中默認(rèn)的模式，它的URL帶著一個#，例如：www.baidu.com/#/vue，它的hash值就是#/vue
hash的值會出現(xiàn)再URL里面的，但是不會出現(xiàn)再HTTP請求之中的，也就是說，它并沒有向后端發(fā)起請求，對后端是沒有影響的
我們看一下如果沒有使用哈希在瀏覽器是怎么樣的
在上面可以看出，如果萬一后端沒有給我們配備路由，我們?nèi)菀讈G失這個頁面，請求不到這個URL。
再看看有哈希路由的
我沒有在后端配置這個路由，但是它依然可以加載到，說明
哈希路由它只是改變hash值，不會重新加載頁面，這樣的話跟我們app的體驗是一樣的，只是改變了樣子，但是沒有改變內(nèi)在
而且這種模式瀏覽器支持度非常好，而且低版本的瀏覽器也支持，沒有兼容性的問題。
目前來說，hash路由它被稱為前端路由，作為單頁應(yīng)用的標(biāo)準(zhǔn)搭配了，但是這么好用原理知道多少呢?
我們來看一下它的實現(xiàn)原理
<body>
<button id="btn">點擊更改路徑</button>
<script>
const btn = document.getElementById('btn')
window.onhashchange = (e) => {
console.log('old: ', e.oldURL);
console.log('new: ', e.newURL);
console.log('hash: ', location.hash);
}
btn.addEventListener('click', () => {
location.href = '#/home'
})
</script>
</body>
上面我寫了一個demo，hash模式的主要原理就是onhashchange()事件，使用onhashchange()事件的好處就是，在頁面的hash值發(fā)生變化時，無需向后端發(fā)起請求
我通過傳入一個事件對象，如果路由發(fā)生改變就會觸發(fā)這個函數(shù)，分別打印新舊URL，然后通過location.hash獲取到這個hash值。
而且，頁面是無刷新的
我們看一下瀏覽器
這樣看來，我們可以通過這樣的路由來讓我們的頁面發(fā)生變化，而且不用給后端發(fā)起請求。
還有就是hash值變化對應(yīng)的URL都會被瀏覽器記錄下來，這樣瀏覽器就能實現(xiàn)頁面的前進(jìn)和后退。而且這樣用起來非常的流暢，像使用APP一樣
history模式
history模式的URL中沒有#，它使用傳統(tǒng)的路由分發(fā)模式，就是說用戶在輸入一個URL時，服務(wù)器會接收這個請求，并解析這個URL，然后做出相應(yīng)的處理，也就是它向服務(wù)器發(fā)起了一個請求差不錯
先看demo
<body>
<button id="btn">點擊更改路徑</button>
<script>
const btn = document.getElementById('btn')
window.addEventListener('DOMContentLoaded', () => {
console.log('path: ', location.pathname);
})
btn.addEventListener('click', () => {
const state = {
pathName: 'index'
}
history.pushState(state, '', 'index') //切換路由
console.log('路由切換了： ', 'index');
})
window.onpopstate = (e) => {
console.log('onpopstate', e.state, location.pathname);
}
</script>
</body>
我在點擊btn的時候傳入一個路由對象，假設(shè)他是index，然后我用history.pushState()切換了路由，模擬了網(wǎng)頁路由的切換，一旦這個路由切換了，就會被監(jiān)聽到
然后我設(shè)想當(dāng)我們?yōu)g覽器前進(jìn)后退的時候也會被監(jiān)聽到，所以加了window.onpopstate這個API，傳入事件對象，監(jiān)聽它們路由的變化
我們看一下瀏覽器
當(dāng)我進(jìn)入的時候先打印出它的path: /history.html，然后我又點擊了哪個按鈕，切換了路由
然后我有按了瀏覽器的回退到了history這個路由，渲染了history這個頁面，然后我又點擊了一下前進(jìn)按鈕，它又渲染了index這個頁面
然后為什么第一次回退會打印null/history.html呢，因為它的路徑與對應(yīng)關(guān)系的狀態(tài)，因為我在一開始的history沒有定義路徑，所以為null，后來能打印是因為我定義了路徑，換句話說就是，如果我后端沒有配置它的路徑，頁面容易出現(xiàn)404，也就是頁面丟失的狀態(tài)
總體來說吧，hash模式和history模式都有各自的優(yōu)勢和缺陷，如果是說哪一個好用，具體要看應(yīng)用場景
