最開始路由就是簡單的乙個url，在瀏覽器輸入url位址向伺服器傳送請求，伺服器會根據這個位址將對應的html檔案返回給瀏覽器進行渲染，如果這個頁面還用到了外部的js和css資源檔案，瀏覽器將會再傳送一次請求，伺服器才會將對應的資源返回給瀏覽器。
這樣的話我們可以簡單的模擬一下，當使用者首次訪問**時，輸入位址向伺服器傳送請求，伺服器返回對應的html檔案讓瀏覽器進行渲染，當使用者跳轉到第二個頁面時，瀏覽器又會傳送請求，讓伺服器返回第二個頁面對應的html檔案進行渲染，使用者進入第三個頁面時又會傳送請求…等，
這樣的話如果那個html檔案很大時這就會導致頁面載入緩慢，使用者體驗感不好，所以為了減輕伺服器的壓力讓使用者體驗感更強，就出現了單頁面應用，單頁面就是整個專案與只有乙個html檔案，當使用者首次訪問**時，伺服器就會將這個html檔案返回給瀏覽器，同時將打包好的js，css檔案一起傳送過來，如果你不重新整理這將會是第一次也是最後一次伺服器向你傳送html檔案，當你切換到其他頁面時，伺服器只會返回給你對應的json資料讓你去渲染頁面，如果你使用了元件按需載入，每次切換頁面時會載入對應的元件，那問題來了，既然伺服器不會再返回新的html檔案，那瀏覽器怎麼知道到底該渲染那個頁面？？？，這就要用到我們今天說到的前端路由router。
早期的前端路由的實線就是基於localtion.hash來實現的，localtion.hash就是#後面的內容，其原理就是監聽#後面的內容的變化來傳送ajax請求進行更新，這裡使用hashchange來監聽url的變化，使用hash模式有兩個特點：我們舉個例子，加入我們訪問的位址是實際上我們像伺服器傳送的url是當使用者訪問時，伺服器會返回乙個html檔案以及打包好的js,css檔案，當訪問/#my/home時，瀏覽器會根據hash值請求對應的json資料渲染頁面，像我們的vue-router,react-router都是監聽了hash事件響應hash值的改變，根據hash值的不同渲染不同的頁面。當重新整理頁面時，hash不會傳給伺服器
優點：
缺點：
原理
history是基於html5新增的pushstate()和replacestate()兩個api以及瀏覽器的popstate事件監聽歷史棧的改變，只要歷史棧有資訊發生改變的話，就會觸發該事件，當時用pushstate()和replacestate()對url進行修改時，瀏覽器不會重新整理，在history模式下，url沒有#這樣更美觀一些，比如/my/detail,但是注意的是前端的url必須和實際向後端傳送請求的url一致，而且還需要後台配置的支援，如訪問/my/detail時，如果後台沒有對/my.detail的路由處理，將返回404錯誤
pushstate(state,title,url)和replacestate(state,title,url)都可以接受三個引數，state指的是需要儲存的資料，這個資料在觸發popstate事件時可以在event.state中獲取，title沒什麼用，一般給null就行，url指設定新的url記錄，通過修改url值進行頁面的跳轉。
優缺點： vue學習筆記 動態路由 hash和history
上一節講了vue router的基本配置和使用，這節來說動態路由 一 什麼是動態路由 動態路由就是url後面的一些值是可以動態變化的 二 這裡來配乙個動態路由 如下 userid可以動態變化 const routes 建立路由元件 使用者 export default 同時我們通過使用計算屬性 你也...
hash路由和history路由
hash模式 url後面的有乙個 後面的字串，叫hash值，也叫錨點。1 hash 值變化不會導致瀏覽器向伺服器發出請求 2 hash 改變會觸發 hashchange 事件 當hash值變化了，就會觸發事件 3 在 html5 的 history 出現前，基本都是使用 hash 來實現前端路由的 ...
關於hash路由和history路由
1.參考文件 hash模式?history模式 window.location.hash和search掐架 2.問題 3.關於兩種路由的組成 hash模式 簡單總結 除去伺服器需要使用的，能使用的僅剩下了hash,hash改變不會重新整理頁面,hash值改變會增加歷史記錄 就是會有頁面的前進後退 號...