# 前端路由 從用戶的角度看，前端路由主要實現了兩個功能（使用ajax更新頁面狀態的情況下）： 1. 記錄當前頁面的狀態（保存或分享當前頁的url，再次打開該url時，網頁還是保存（分享）時的狀態）； 2. 可以使用瀏覽器的前進后退功能（如點擊后退按鈕，可以使頁面回到使用ajax更新頁面之前的狀態，url也回到之前的狀態）； 作為開發者，要實現這兩個功能，我們需要做到： 1. 改變url且不讓瀏覽器向服務器發出請求； 2. 監測 url 的變化； 3. 截獲 url 地址，并解析出需要的信息來匹配路由規則。 我們路由常用的hash模式和history模式實際上就是實現了上面的功能 ***** ## hash模式 這里的 hash 就是指 url 尾巴后的 # 號以及后面的字符。這里的 # 和 css 里的 # 是一個意思。hash 也 稱作 錨點，本身是用來做頁面定位的，她可以使對應 id 的元素顯示在可視區域內。 由于 hash 值變化不會導致瀏覽器向服務器發出請求，而且 hash 改變會觸發 hashchange 事件，瀏覽器的進后退也能對其進行控制，所以人們在 html5 的 history 出現前，基本都是使用 hash 來實現前端路由的。 使用到的api： ``` window.location.hash = 'qq' // 設置 url 的 hash，會在當前url后加上 '#qq' var hash = window.location.hash // '#qq' window.addEventListener('hashchange', function(){ // 監聽hash變化，點擊瀏覽器的前進后退會觸發 }) ``` ## history模式 已經有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，為什么還要搞個 history 呢？ 首先，hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基于 url 的，如果要傳遞復雜的數據，會有體積的限制，而 history 模式不僅可以在url里放參數，還可以將數據存放在一個特定的對象中。 最重要的一點： > 如果不想要很丑的 hash，我們可以用路由的 history 模式 > —— 引用自 vueRouter文檔 相關API：