前端路由
- 定義：在單頁面應用，大部分頁面結構不變，只改變部分內容的使用
- 優點：使用者體驗好，不需要每次都從伺服器全部獲取，快速展現給使用者
- 缺點：使用瀏覽器的前進，後退鍵的時候會重新傳送請求，沒有合理地利用快取。單頁面無法記住之前滾動的位置，無法在前進，後退的時候記住滾動的位置
後端路由
通過使用者請求的url導航到具體的html頁面；每跳轉到不同的URL，都是重新訪問服務端，然後服務端返回頁面，頁面也可以是服務端獲取資料，然後和模板組合，返回HTML，也可以是直接返回模板HTML，然後由前端js再去請求資料，使用前端模板和資料進行組合，生成想要的HTML
前後端路由對比
- 從效能和使用者體驗的層面來比較的話，後端路由每次訪問一個新頁面的時候都要向伺服器傳送請求，然後伺服器再響應請求，這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網路延遲，對於使用者體驗來說會有相當大的提升。
- 在某些場合中，用ajax請求，可以讓頁面無重新整理，頁面變了但Url沒有變化，使用者就不能複製到想要的地址，用前端路由做單頁面網頁就很好的解決了這個問題。但是前端路由使用瀏覽器的前進，後退鍵的時候會重新傳送請求，沒有合理地利用快取。
單頁面的優勢
- 不存在頁面切換問題，因為只在同一個頁面間切換，會更流暢，而且可以附加各種動畫和過度效果，使用者體驗更好。
- 可以用到vue的路由和狀態保持，不用擔心切換造成的資料不同步。
- 打包方便，有現成的腳手架可以用，也比較不容易出問題
單頁面的劣勢
- 所有邏輯和業務都在一個頁面上，邏輯上不是很清楚，當業務變得複雜的時候改動起來就比較麻煩
- 雞蛋都在一個籃子裡，只要一個地方出現錯誤，可能導致整個頁面出錯
- 所有程式碼都在一個頁面，首次載入耗時較長，頁面體積較大
只有一張Web頁面的應用，是一種從Web伺服器載入的富客戶端，單頁面跳轉僅重新整理區域性資源 ，公共資源(js、css等)僅需載入一次 頁面跳轉：使用js中的append/remove或者show/hide的方式來進行頁面內容的更換； 資料傳遞：可通過全域性變數或者引數傳遞，進行相關資料互動
使用場景： 適用於高度追求高度支援搜尋引擎的應用
多頁面的優勢
-
邏輯清楚，各個頁面按照功能和邏輯劃分，不用擔心業務複雜度
-
單個頁面體積較小，載入速度比較有保證
-
多頁面跳轉需要重新整理所有資源，每個公共資源(js、css等)需選擇性重新載入
-
頁面跳轉：使用window.location.href = "./index.html"進行頁面間的跳轉；
-
資料傳遞：可以使用path?account="123"&password=""路徑攜帶資料傳遞的方式，或者localstorage、cookie等儲存方式
使用場景： 高要求的體驗度，追求介面流暢的應用
多頁面的劣勢
- 重複程式碼較多
- 頁面經常需要切換，切換效果取決於瀏覽器和網路情況，對使用者體驗會有一定負面影響
- 無法充分利用vue的路由和狀態保持，在多個頁面之間共享和同步資料狀態會成為一個難題
hash 模式
這裡的 hash 就是指 url 後的 # 號以及後面的字元。比如說 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是我們期望的 hash 值。
由於 hash 值的變化不會導致瀏覽器像伺服器傳送請求，而且 hash 的改變會觸發 hashchange 事件，瀏覽器的前進後退也能對其進行控制，所以在 H5 的 history 模式出現之前，基本都是使用 hash 模式來實現前端路由。
// 監聽hash變化，點選瀏覽器的前進後退會觸發
window.addEventListener('hashchange', function(event){
let newURL = event.newURL; // hash 改變後的新 url
let oldURL = event.oldURL; // hash 改變前的舊 url
},false)
複製程式碼下面實現一個路由物件
class HashRouter{
constructor(){
//用於儲存不同hash值對應的回撥函式
this.routers = {};
window.addEventListener('hashchange',this.load.bind(this),false)
}
//用於註冊每個檢視
register(hash,callback = function(){}){
this.routers[hash] = callback;
}
//用於註冊首頁
registerIndex(callback = function(){}){
this.routers['index'] = callback;
}
//用於處理檢視未找到的情況
registerNotFound(callback = function(){}){
this.routers['404'] = callback;
}
//用於處理異常情況
registerError(callback = function(){}){
this.routers['error'] = callback;
}
//用於呼叫不同檢視的回撥函式
load(){
let hash = location.hash.slice(1),
handler;
//沒有hash 預設為首頁
if(!hash){
handler = this.routers.index;
}
//未找到對應hash值
else if(!this.routers.hasOwnProperty(hash)){
handler = this.routers['404'] || function(){};
}
else{
handler = this.routers[hash]
}
//執行註冊的回撥函式
try{
handler.apply(this);
}catch(e){
console.error(e);
(this.routers['error'] || function(){}).call(this,e);
}
}
}
複製程式碼再來一個例子
<body>
<div id="nav">
<a href="#/page1">page1</a>
<a href="#/page2">page2</a>
<a href="#/page3">page3</a>
<a href="#/page4">page4</a>
<a href="#/page5">page5</a>
</div>
<div id="container"></div>
</body>
複製程式碼let router = new HashRouter();
let container = document.getElementById('container');
//註冊首頁回撥函式
router.registerIndex(()=> container.innerHTML = '我是首頁');
//註冊其他檢視回到函式
router.register('/page1',()=> container.innerHTML = '我是page1');
router.register('/page2',()=> container.innerHTML = '我是page2');
router.register('/page3',()=> container.innerHTML = '我是page3');
router.register('/page4',()=> {throw new Error('丟擲一個異常')});
//載入檢視
router.load();
//註冊未找到對應hash值時的回撥
router.registerNotFound(()=>container.innerHTML = '頁面未找到');
//註冊出現異常時的回撥
router.registerError((e)=>container.innerHTML = '頁面異常，錯誤訊息：<br>' + e.message);
複製程式碼history 模式
在 HTML5 之前，瀏覽器就已經有了 history 物件。但在早期的 history 中只能用於多頁面的跳轉：
history.go(-1); // 後退一頁
history.go(2); // 前進兩頁
history.forward(); // 前進一頁
history.back(); // 後退一頁
複製程式碼在 HTML5 的規範中，history 新增了以下幾個 API
history.pushState(); // 新增新的狀態到歷史狀態棧
history.replaceState(); // 用新的狀態代替當前狀態
history.state // 返回當前狀態物件
複製程式碼由於 history.pushState() 和 history.replaceState() 可以改變 url 同時，不會重新整理頁面，所以在 HTML5 中的 histroy 具備了實現前端路由的能力。
對於單頁應用的 history 模式而言，url 的改變只能由下面四種方式引起：
- 點選瀏覽器的前進或後退按鈕
- 點選 a 標籤
- 在 JS 程式碼中觸發 history.pushState 函式
- 在 JS 程式碼中觸發 history.replaceState 函式
下面實現一個路由物件
class HistoryRouter{
constructor(){
//用於儲存不同path值對應的回撥函式
this.routers = {};
this.listenPopState();
this.listenLink();
}
//監聽popstate
listenPopState(){
window.addEventListener('popstate',(e)=>{
let state = e.state || {},
path = state.path || '';
this.dealPathHandler(path)
},false)
}
//全域性監聽A連結
listenLink(){
window.addEventListener('click',(e)=>{
let dom = e.target;
if(dom.tagName.toUpperCase() === 'A' && dom.getAttribute('href')){
e.preventDefault()
this.assign(dom.getAttribute('href'));
}
},false)
}
//用於首次進入頁面時呼叫
load(){
let path = location.pathname;
this.dealPathHandler(path)
}
//用於註冊每個檢視
register(path,callback = function(){}){
this.routers[path] = callback;
}
//用於註冊首頁
registerIndex(callback = function(){}){
this.routers['/'] = callback;
}
//用於處理檢視未找到的情況
registerNotFound(callback = function(){}){
this.routers['404'] = callback;
}
//用於處理異常情況
registerError(callback = function(){}){
this.routers['error'] = callback;
}
//跳轉到path
assign(path){
history.pushState({path},null,path);
this.dealPathHandler(path)
}
//替換為path
replace(path){
history.replaceState({path},null,path);
this.dealPathHandler(path)
}
//通用處理 path 呼叫回撥函式
dealPathHandler(path){
let handler;
//沒有對應path
if(!this.routers.hasOwnProperty(path)){
handler = this.routers['404'] || function(){};
}
//有對應path
else{
handler = this.routers[path];
}
try{
handler.call(this)
}catch(e){
console.error(e);
(this.routers['error'] || function(){}).call(this,e);
}
}
}
複製程式碼再來一個例子
<body>
<div id="nav">
<a href="/page1">page1</a>
<a href="/page2">page2</a>
<a href="/page3">page3</a>
<a href="/page4">page4</a>
<a href="/page5">page5</a>
<button id="btn">page2</button>
</div>
<div id="container">
</div>
</body>
複製程式碼let router = new HistoryRouter();
let container = document.getElementById('container');
//註冊首頁回撥函式
router.registerIndex(() => container.innerHTML = '我是首頁');
//註冊其他檢視回到函式
router.register('/page1', () => container.innerHTML = '我是page1');
router.register('/page2', () => container.innerHTML = '我是page2');
router.register('/page3', () => container.innerHTML = '我是page3');
router.register('/page4', () => {
throw new Error('丟擲一個異常')
});
document.getElementById('btn').onclick = () => router.assign('/page2')
//註冊未找到對應path值時的回撥
router.registerNotFound(() => container.innerHTML = '頁面未找到');
//註冊出現異常時的回撥
router.registerError((e) => container.innerHTML = '頁面異常，錯誤訊息：<br>' + e.message);
//載入頁面
router.load();
複製程式碼