詳解單頁面路由的幾種實現原理

前言

路由是每一個單頁面網站必需要有的，因此，理解一下原理，我以爲仍是比較重要的。

本篇，基本不會貼代碼，只講原理，代碼在頁底會有githup地址，主意，必定要放在服務本地服務器裏跑（由於有ajax），

但願能幫到你。

衆所周知單頁面網站的路徑跳轉全是經過js來控制的，下面我們來說講

第一種：url徹底不動型

這一種的狀況是url徹底不動，即你的頁面怎麼改變，怎麼跳轉url都不會改變

這種狀況的原理 就是純ajax拿到頁面後替換原頁面中的元素，

這種狀況沒什麼好講的，好的一言不和上代碼    demo（地址在頁底）   這裏有所有的代碼

第二種：帶hash(#)型

這種類型的優勢就是刷新頁面，頁面也不會丟。

實現原理：

小明說：若是window有一個事件能讓我監聽url的變化，那我就能實先路由，

那樣我就能夠根據url的變化，來經過ajax請求參數來渲染頁面，

一個url對應一個頁面，也不會重複，多好了。

我：還真有，可是隻能監聽 #後面參數的變化。

小明說：唉，那就湊合一下把。

經過監聽 hash（#）的變化來執行js代碼 從而實現 頁面的改變      

核心代碼：

window.addEventListener('hashchange',function(){
self.urlChange()
})

就是經過這個原理 只要#改變了 就能觸發這個事件，這也是不少單頁面網站的url中都也 （#）的緣由

demo在下面

第三種：無hash（#）型

這種類型是經過html5的最新history api來實現的   能正常的回退前進  很好

url是這樣的  www.ff.ff/jjkj/fdfd/fdf/fd       和普通的url同樣，可是也有缺點 ，就是一刷新頁面 頁面就會丟，

由於 只要刷新 這個url（www.ff.ff/jjkj/fdfd/fdf/fd）就會請求服務器，然而服務器上根本沒有這個資源，因此就會報404，解決方案就 配置一下服務器端（能夠百度一下）

實現原理：

用了 這幾個 api

history.pushState
history.replaceState
history.state
window.onpopstate事件

第一步：history.pushState(null,null,"/abc");  改變url

第二部：執行一個函數（這個函數裏有改變頁面的代碼）

就這末簡單。

 

 

下面講一下這幾個api怎麼用

pushState是將指定的URL添加到瀏覽器歷史裏,存儲當前歷史記錄點API:history.pushState(state, title, url)

// @state狀態對象：記錄歷史記錄點的額外對象，能夠爲空
// @title頁面標題：目前全部瀏覽器都不支持
// @url可選的url：瀏覽器不會檢查url是否存在，只改變url，url必須同域，不能跨域

history.pushState的目的

SEO優化
更少的數據請求
更好的用戶體驗

history.replaceState

replaceState是將指定的URL替換當前的URL,替換當前歷史記錄點

replaceState的api和pushState相似，不一樣之處在於replaceState不會在window.history裏新增歷史記錄點，而pushState會在歷史記錄點裏新增一個記錄點的

history.state

當前URL下對應的狀態信息。若是當前URL不是經過pushState或者replaceState產生的，那麼history.state是null。

state對象雖然能夠存儲不少自定義的屬性，但對於不可序列化的對象則不能存儲

window.onpopstate事件

window.onpopstate事件主要是監聽歷史記錄點，也就是說監聽URL的變化，但會忽略URL的hash部分。

history.go和history.back（包括用戶按瀏覽器歷史前進後退按鈕）觸發，而且頁面無刷的時候（因爲使用pushState修改了history）會觸發popstate事件，事件發生時瀏覽器會從history中取出URL和對應的state對象替換當前的URL和history.state。經過event.state也能夠獲取history.state。

注意點：

javascript腳本執行window.history.pushState和window.history.replaceState不會觸發onpopstate事件。
谷歌瀏覽器和火狐瀏覽器在頁面第一次打開的反應是不一樣的，谷歌瀏覽器奇怪的是回觸發onpopstate事件，而火狐瀏覽器則不會。

 

原文連接：http://www.javashuo.com/article/p-pbcufawy-ev.html