閱讀目錄
一：什么是路由？前端有哪些路由？他們有哪些特性？
路由是根據不同的url地址來顯示不同的頁面或內容的功能，這個概念很早是由后端提出的。
后端之前是這么做的，當我們訪問 http://xxx.abc.com/xx 的時候，大致流程可以想象成這樣的：
1. 瀏覽器向服務器發出請求。
2. 服務器監聽到80端口，如果有請求過來，那么就解析url地址。
3. 服務器根據客戶端的路由配置，然后就返回相應的信息(比如html字符串、json數據或圖片等)。
4. 瀏覽器根據數據包的 Content-Type來決定如何解析數據。
如上就是后端路由最初始的實現方式，那么既然有后端路由，那為什么還需要我們前端路由呢？后端路由有一個很大的缺點就是每次路由切換的時候都需要去刷新頁面，然后發出ajax請求，然后將請求數據返回回來，那么這樣每次路由切換都要刷新頁面對於用戶體驗來說就不好了。因此為了提升用戶體驗，我們前端路由就這樣產生了。它就可以解決瀏覽器不會重新刷新了。
在理解路由之前，我們下面看下History API有哪些方法：
DOM window對象通過history對象提供了對當前會話瀏覽歷史的訪問，在html4中有如下方法：
window.history.length: 返回當前會話瀏覽過的頁面數量。
window.history.go(?delta): 接收一個整數作為參數，按照當前頁面在會話瀏覽歷史記錄中的位置進行移動。如果參數為0、undefined、null、false 將刷新頁面，相當於執行window.location.reload()方法。如果參數大於瀏覽器瀏覽的數量，或小於瀏覽前的數量的話，什么都不會做。
window.history.back(). 移動到上一頁。相當於點擊瀏覽器的后退按鈕，等價於 window.history.go(-1);
window.history.forward(). 移動到下一頁，相當於點擊瀏覽器的前進按鈕，等價於window.history.go(1).
在html5中，History API 新增了操作會話瀏覽歷史記錄的功能。如下新增的幾個方法：
window.history.state. 該參數是只讀的，表示與會話瀏覽歷史的當前記錄相關聯的狀態對象。如下圖所示：
window.history.pushState(data, title, ?url): 在會話瀏覽歷史記錄中添加一條記錄。
window.history.replaceState(data, title, ?url): 該方法用法和history.pushState方法類似，但是該方法的含義是將修改會話瀏覽歷史的當前記錄，而不是新增一條記錄。也就是說把當前的瀏覽地址換成 replaceState之后的地址，但是瀏覽歷史記錄的總長度並沒有新增。
注意：執行上面兩種方法后，url地址會發生改變。但是不會刷新頁面。因此有了這些基本知識后，我們再來看下前端路由。
那么前端路由也有2種模式，第一種是hash模式，第二種是history模式。我們來分別看下這兩種知識點及區別如下：
1. hash模式
hash路由模式是這樣的：http://xxx.abc.com/#/xx。 有帶#號，后面就是hash值的變化。改變后面的hash值，它不會向服務器發出請求，因此也就不會刷新頁面。並且每次hash值發生改變的時候，會觸發hashchange事件。因此我們可以通過監聽該事件，來知道hash值發生了哪些變化。比如我們可以如下簡單的監聽：
function hashAndUpdate () { // todo 匹配 hash 做 dom 更新操作 } window.addEventListener('hashchange', hashAndUpdate);
我們先來了解下location有哪些屬性，如下：
// 完整的url location.href // 當前URL的協議，包括 :; 比如 https: location.protocol /* 主機名和端口號，如果端口號是80(http)或443(https), 那就會省略端口號，比兔 www.baidu.com:8080 */ location.host // 主機名：比如：www.baidu.com location.hostname // 端口號；比如8080 location.port // url的路徑部分，從 / 開始; 比如 https://www.baidu.com/s?ie=utf-8，那么 pathname = '/s'了 location.pathname // 查詢參數，從?開始；比如 https://www.baidu.com/s?ie=utf-8 那么 search = '?ie=utf-8' location.search // hash是頁面中的一個片段，從 # 開始的，比如 https://www.baidu.com/#/a/b 那么返回值就是："#/a/b" location.hash
location.href
我們通過改變location.href來改變對應的url，看看是否會刷新頁面，我們做如下測試可以看到，使用location.href 改變url后並不會刷新頁面，如下代碼在控制台中演示：
location.hash
改變hash不會觸發頁面跳轉，因為hash鏈接是當前頁面中的某個片段，所以如果hash有變化，那么頁面將會滾動到hash所連接的位置。但是頁面中如果不存在hash對應的片段，則沒有任何效果。比如 a鏈接。這和 window.history.pushState方法類似，都是不刷新頁面的情況下更改url。如下也可以看到操作並沒有刷新url，如下演示：
hash 和 pushState 對比有如下缺點：
1. hash只能修改url的片段標識符的部分。並且必須從#號開始，但是pushState且能修改路徑、查詢參數和片段標識符。pushState比hash更符合前端路由的訪問方式，更加優雅(因為不帶#號)。
2. hash必須和原先的值不同，才能新增會話瀏覽歷史的記錄，但是pushState可以新增相同的url的記錄，如下所示：
1.1 使用hashchange事件來監聽url hash的改變
我們來演示下，我們使用node啟動一個服務，然后有一個index.html頁面，該頁面引入了一個js文件，該js文件有如下js代碼：
window.addEventListener('hashchange', function(e) {
console.log(e)
});
如上代碼就是監聽hash值發生變化的事件，然后我們訪問該index.html頁面后，然后在控制台中，做如下操作，如下圖演示：
如上可以看到；不管我們是通過location接口直接改變hash值，還是我們通過history直接前進或后退操作(改變hash變化)，我們都可以看到都能通過 hashchange該事件進行監聽到url hash的改變。並且不會刷新頁面。
2. history模式
HTML5的History API為瀏覽器的全局history對象增加了該擴展方法。它是一個瀏覽器的一個接口，在window對象中提供了onpopstate事件來監聽歷史棧的改變，只要歷史棧有信息發生改變的話，就會觸發該事件。提供了如下事件：
window.addEventListener('popstate', function(e) {
console.log(e)
});
history提供了兩個操作歷史棧的API: history.pushState 和 history.replaceState
history.pushState(data[,title][,url]); // 向歷史記錄中追加一條記錄
history.replaceState(data[,title][,url]); // 替換當前頁在歷史記錄中的信息。
如上html5中新增了上面這兩個方法，該兩個方法也可以改變url，頁面也不會重新刷新。下面我們也可以來做個demo，來監聽下popstate事件，現在在我js里面放入如下js代碼:
window.addEventListener('popstate', function(e) {
console.log(e)
});
然后我們訪問頁面，如下所示：
如上圖所示，我們使用location.hash, history.go(-1), history.pushState 等方法操作都會觸發 popstate 事件，並且瀏覽器的url地址也會跟着改變。只會改變url地址，且不會重新刷新頁面。
hash模式的特點：
hash模式在瀏覽器地址欄中url有#號這樣的，比如(http://localhost:3001/#/a). # 后面的內容不會傳給服務端，也就是說不會重新刷新頁面。並且路由切換的時候也不會重新加載頁面。
history模式的特點：
瀏覽器地址沒有#， 比如(http://localhost:3001/a); 它也一樣不會刷新頁面的。但是url地址會改變。
二：如何實現簡單的hash路由？
實現hash路由需要滿足如下基本條件：
1. url中hash值的改變，並不會重新加載頁面。
2. hash值的改變會在瀏覽器的訪問歷史中增加一條記錄，我們可以通過瀏覽器的后退，前進按鈕控制hash值的切換。
3. 我們可以通過hashchange事件，監聽到hash值的變化，從而加載不同的頁面顯示。
觸發hash值的變化有2種方法：
第一種是通過a標簽，設置href屬性，當點擊a標簽之后，地址欄會改變，同時會觸發hashchange事件。比如如下a鏈接：
<a href="#/test1">測試hash1</a>
第二種是通過js直接賦值給location.hash，也會改變url，觸發hashchange事件。
location.hash = '#/test1';
因此我們下面可以實現一個簡單的demo，html代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hash路由demo</title> </head> <body> <ul> <li><a href="#/">我是主頁</a></li> <li><a href="#/a">我是a頁面</a></li> <li><a href="#/b">我是b頁面</a></li> </ul> </body> </html>
然后我們hash.js 代碼如下：
class HashRouter { constructor() { // 存儲hash與callback鍵值對 this.routes = {}; // 保存當前的hash this.currentHash = ''; // 綁定事件 const hashChangeUrl = this.hashChangeUrl.bind(this); // 頁面加載事件 window.addEventListener('load', hashChangeUrl, false); // 監聽hashchange事件 window.addEventListener('hashchange', hashChangeUrl, false); } // path路徑和callback函數對應起來，並且使用 上面的this.routes存儲起來 route(path, callback) { this.routes[path] = callback || function() {}; } hashChangeUrl() { /* 獲取當前的hash值 location.hash 獲取的值為："#/a, 因此 location.hash.slice(1) = '/a' 這樣的 */ this.currentHash = location.hash.slice(1) || '/'; // 執行當前hash對應的callback函數 this.routes[this.currentHash](); } } // 初始化 const Router = new HashRouter(); const body = document.querySelector('body'); const changeColor = function(color) { body.style.backgroundColor = color; }; // 注冊函數 Router.route('/', () => { changeColor('red'); }); Router.route('/a', () => { changeColor('green'); }); Router.route('/b', () => { changeColor('#CDDC39'); });
如上就是一個非常簡化的hash路由了，首先我們代碼也是非常的簡化(我相信大家都能看懂)，首先如上js代碼有一個route函數，該函數的作用就是初始化對應的路由和函數進行綁定起來，把他們保存到 this.routes 對象里面去，然后使用 hashchange 事件進行監聽，如果觸發了該事件，就找到該路由，然后觸發對應的函數即可。我們點擊某個a鏈接就會調用對應的函數，或者我們可以在控制台中使用 location.hash = '/b'; 來改變值也會觸發的。
查看效果
三：如何實現簡單的history路由？
代碼如下：
class HistoryRoutes { constructor() { // 保存對應鍵和函數 this.routes = {}; // 監聽popstate事件 window.addEventListener('popstate', (e) => { const path = this.getState(); this.routes[path] && this.routes[path](); }); } // 獲取路由路徑 getState() { const path = window.location.pathname; return path ? path : '/'; } route(path, callback) { this.routes[path] = callback || function() {}; } init(path) { history.replaceState(null, null, path); this.routes[path] && this.routes[path](); } go(path) { history.pushState(null, null, path); this.routes[path] && this.routes[path](); } } window.Router = new HistoryRoutes(); console.log(location.pathname); Router.init(location.pathname); const body = document.querySelector('body'); const changeColor = function(color) { body.style.backgroundColor = color; }; // 注冊函數 Router.route('/', () => { changeColor('red'); }); Router.route('/a', () => { changeColor('green'); }); Router.route('/b', () => { changeColor('#CDDC39'); }); const ul = document.querySelector('ul'); ul.addEventListener('click', e => { console.log(e.target); if (e.target.tagName === 'A') { e.preventDefault(); Router.go(e.target.getAttribute('href')); } });
四：hash和history路由一起實現
首先看下項目目錄結構如下：
|----項目demo | |--- .babelrc # 解決es6語法問題 | |--- node_modules # 所有依賴的包 | |--- dist # 打包后的頁面 訪問該頁面使用：http://0.0.0.0:7799/dist | |--- js | | |--- base.js | | |--- hash.js | | |--- history.js | | |--- routerList.js | | |--- index.js | |--- package.json # 依賴的包文件 | |--- webpack.config.js # webpack打包文件 | |--- index.html # html 頁面
index.html 頁面如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hash+history路由demo</title> </head> <body> <div id="app"></div> <ul class="list"> <li><a href="/">我是主頁</a></li> <li><a href="/hash">我是hash頁面</a></li> <li><a href="/history">我是history頁面</a></li> </ul> </body> </html>
js/base.js 代碼如下：
const ELEMENT = document.querySelector('#app');
export class BaseRouter {
constructor(list) {
this.list = list;
}
render(state) {
let ele = this.list.find(ele => ele.path === state);
ele = ele ? ele : this.list.find(ele => ele.path === '*');
ELEMENT.innerText = ele.component;
}
}
如上代碼base.js 該類就一個構造函數，在hash.js 或 history.js 會繼承該類，因此hash或history類都有該render() 方法。該render方法作用就是找到對應的路徑是否等於 routerlist中的path，如果找到的話，就把對應的component里面的內容賦值給 id為app的元素。
js/hash.js 代碼如下：
import { BaseRouter } from './base.js';
// hash路由繼承了BaseRouter
export class HashRouter extends BaseRouter {
constructor(list) {
super(list);
this.handler();
// 監聽hash事件變化，並且重新渲染頁面
window.addEventListener('hashchange', (e) => {
this.handler();
});
}
// 渲染
handler() {
const state = this.getState();
this.render(state);
}
// 獲取當前的hash
getState() {
const hash = window.location.hash;
return hash ? hash.slice(1) : '/';
}
// 獲取完整的url
getUrl(path) {
const href = window.location.href;
const index = href.indexOf('#');
const base = index > -1 ? href.slice(0, index) : href;
return `${base}#${path}`;
}
// hash值改變的話，實現壓入
push(path) {
window.location.hash = path;
}
// 替換功能
replace(path) {
window.location.replace(this.getUrl(path));
}
// 模擬history.go 功能，實現前進/后退功能
go(n) {
window.history.go(n);
}
}
hash 代碼如上；該類里面有hashchange事件監聽hash值的變化，如果變化的話就會調用 handler 函數，在執行該函數中的render方法之前，會先調用 getState 方法，該方法目的是獲取當前的hash。比如getState方法中使用location.hash 獲取的hash會是 '#/x' 這樣的，然后會返回 '/x'。
getUrl() 方法是獲取完整的url，可以看如上代碼理解下即可，其他的就是 push,replace,go方法。
js/history.js 代碼如下：
import { BaseRouter } from './base.js';
export class HistoryRouter extends BaseRouter {
constructor(list) {
super(list);
this.handler();
// 監聽歷史棧變化，變化時候重新渲染頁面
window.addEventListener('popstate', (e) => {
this.handler();
});
}
// 渲染
handler() {
const state = this.getState();
this.render(state);
}
// 獲取路由路徑
getState() {
const path = window.location.pathname;
return path ? path : '/';
}
/*
pushState方法實現壓入功能，PushState不會觸發popstate事件，
因此我們需要手動調用handler函數
*/
push(path) {
window.history.pushState(null, null, path);
this.handler();
}
/*
pushState方法實現替換功能，replaceState不會觸發popstate事件，
因此我們需要手動調用handler函數
*/
replace(path) {
window.history.replaceState(null, null, path);
this.handler();
}
go(num) {
window.history.go(num);
}
};
代碼和hash.js 代碼類似。
js/routerList.js 代碼如下：
export const ROUTERLIST = [ { path: '/', name: 'index', component: '這是首頁' }, { path: '/hash', name: 'hash', component: '這是hash頁面' }, { path: '/history', name: 'history', component: '這是history頁面' }, { path: '*', component: '404頁面' } ];
js/index.js 代碼如下：
import { HashRouter } from './hash';
import { HistoryRouter } from './history';
import { ROUTERLIST } from './routerList';
// 路由模式，默認為hash
const MODE = 'history';
class WebRouter {
constructor({ mode = 'hash', routerList }) {
this.router = mode === 'hash' ? new HashRouter(routerList) : new HistoryRouter(routerList);
}
push(path) {
// 返回 this.router 因此有 hash或history中的push方法
this.router.push(path);
}
replace(path) {
this.router.replace(path);
}
go(num) {
this.router.go(num);
}
}
const webRouter = new WebRouter({
mode: MODE,
routerList: ROUTERLIST
});
document.querySelector('.list').addEventListener('click', e => {
const event = e || window.event;
event.preventDefault();
if (event.target.tagName === 'A') {
const url = event.target.getAttribute('href');
!url.indexOf('/') ? webRouter.push(url) : webRouter.go(url);
}
});
如上就是所有的代碼了，仔細研究下看到這樣編寫代碼的好處，就是hash.js，和 history.js 代碼分離出來了，並且都有對應的方法，然后在index.js 初始化對應的代碼。最后使用dom點擊事件傳遞對應的路由進去。
查看效果
注意：github源碼下載后會有一個dist文件夾，該文件是打包后的文件，也就是說我們改完里面的代碼后，先 npm run build 后生成該文件，然后我們再運行下 npm run dev 后，使用 http://0.0.0.0:7799/dist/ 訪問頁面進行切換。