從前端路由到 vue-router

早期前端路由介紹

在早期的前后端尚未分離的時候，前端的路由一般是由后端控制，當在頁面上點擊 a 鏈接跳轉的時候，會將對應的路徑請求發送到后端，后端通過將路由和對應的頁面模板進行匹配，返回一整個頁面給瀏覽器，瀏覽器拿到頁面后執行刷新操作，從而實現訪問不同的地址得到不同頁面的邏輯。但是這樣會存在一個問題，就是每次導航的時候都需要更新整個頁面，但是現實應用中，常常是會有部分內容是不需要每次更新的，例如網站的 banner。我們想要的是每次導航的時候，只更新文檔指定的部分，就這個而言，后端路由顯得有點力不從心。再者，在大型復雜的應用中，涉及到的路由很多而且多是動態變化，這對于服務端路由控制而言也是極其不便的，于是，前端路由控制便應運而生。

瀏覽器前端路由 API - History

History 是 HTML5 新增的瀏覽器全局 API, 該接口允許用戶操作瀏覽器曾經在標簽頁或者框架里訪問的會話歷史記錄。History 對象主要有以下的幾個方法:

History.back()

前往上一頁, 相當于用戶點擊了瀏覽器左上角的返回按鈕, 也等價于 history.go(-1)。

History.forward()

在瀏覽器歷史記錄里前往下一頁，相當于用戶點擊了瀏覽器左上角的前進按鈕, 等價于 history.go(1).

History.go()

通過當前頁面的相對位置從瀏覽器歷史記錄( 會話記錄 )加載頁面。比如：參數為 -1 的時候為上一頁，參數為 1 的時候為下一頁。當整數參數超出界限時，該操作無效果，當傳 0 的時候相當于刷新頁面。

History.pushState()

該方法用于在歷史中添加一條記錄，其使用方式如下所示:

history.pushState(state, title, url) // 其中三個參數的意義分別為 state: Object // 一個與被添加的記錄關聯的對象。在 popstate 事件中可以得到對應的 state 對象的副本。 title: String // 新頁面的標題。但是，現在所有瀏覽器都忽視這個參數。 url: String // 新的網址，必須與當前頁面處在同一個域(否則會失敗報錯),瀏覽器的地址欄將顯示這個網址。

執行該語句后，會往 histroy 對象里面添加一條新的記錄，瀏覽器地址欄將顯示新的地址，但是并不會加載新的文檔，甚至不會檢查該地址是否存在。

history.replaceState() 該方法和 pushState 類似，不同的是， replaceState 修改 History 對象的當前記錄。

popstate 事件

這是 HTML5 新增的一個全局事件，這個事件會在當活動歷史記錄更改的時候觸發, 大部分情況下，當同一個文檔的瀏覽歷史（即 history 對象）出現變化時，就會觸發popstate事件，但是僅僅調用pushState()方法或replaceState()方法 ，并不會觸發該事件，只有用戶點擊瀏覽器后退按鈕和前進按鈕，或者使用 JavaScript 調用 History.back、History.forward、History.go 方法時才會觸發。

其使用方式如下:

window.addEventListener('popstate', function () { console.log('history change') console.log(event.state) // 打印當前記錄的 state 對象 }); history.pushState({state: 1}, '', '/foo') history.pushState({state: 2}, '', '/bar') history.pushState({state: 3}, '', '/test') // 當前記錄為 '/test', state = {state: 3} history.back() // 回退，當前記錄為 '/bar' 所以打印結果為: history change {state: 2} history.back() // 回退，當前記錄為 '/foo' 所以打印結果為: history change {state: 1} history.back() // 回退當初始頁面，初始頁面的 state 為 undefined, 所以打印結果為 history undefined

利用 History API 和 popstate 事件，結合 AJAX, 我們可以實現在不刷新頁面的情況下切換路由和更新頁面。

瀏覽器路由 API - hash

所謂 hash, 即是字符串 URL 的錨部分, 比如一個地址鏈接為?http://www.example.com/#/page1, 那么氣 hash 值為 location.hash = '#/page1'。以 hash 作為路由一個好處是，hash 值部分的內容不會提交到服務，也就是如果只改變 hash 部分，那么瀏覽器不會發送新的請求，且該 hash 記錄會被添加到瀏覽器的訪問歷史記錄中。例如：

// 假設當前路徑為 www.example.com location.hash = 'page1' // 路徑變為 www.example.com/#page1 location.hash = 'page2' // 路徑變為 www.example.com/#page2 location.hash = 'page3' // 路徑變為 www.example.com/#page3 history.length // 4， 上述的操作改變了訪問的歷史記錄， 所以也會觸發 popstate 事件 history.back() // 路徑變為 www.example.com/#page2 history.back() // 路徑變為 www.example.com/#page1 history.forward() // 路徑變為 www.example.com/#page2

另外 hash 值也常常作為定位到頁面某個元素的錨點。

hashchange 事件

hashchange 事件是 HTML5 新增的事件，當 url 處的哈希值改變的時候，便會觸發此事件。例如:

window.addEventListener('hashchange',function() { console.log(location.href) console.log('hash change') }); // 假設當前路徑為 www.example.com location.hash = 'page1' // www.example.com/#page1 hash change location.hash = 'page2' // www.example.com/#page1 hash change history.pushState(null, null, '/bar') // www.example.com/bar, 不會觸發 hashchange

hash 改變不會觸發瀏覽器的請求的表現似乎天然適合前端路由，結合 AJAX 技術，前端可以基本的控制前端路由，但是 hash 這種路由控制的方式不利于搜索引擎，因為搜索引擎不會抓取哈希值部分。

NAT Vue web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。