單頁面應用中的路由分為兩種: hash模式和history模式
1. hash模式
比如 https://www.google.com/#abc中的hash值為abc
特點：hash的變化不會刷新頁面，也不會發送給服務器。但hash的變化會被瀏覽器記錄下來，用來指導瀏覽器中的前進和后退。
瀏覽器提供了hashchange事件來監聽hash的變化
2. history模式
HTML5中history對象新增的API
通過pushState()、replaceState()來修改url地址
區別：pushState會改變history.length，而replaceState不改變history.length
注意：調用replaceState()或者pushState()，只是修改歷或添加瀏覽器歷史記錄中的條目，并不會刷新或改變頁面。
手動刷新頁面時，會把請求發送到服務器，如果沒有對應的資源，就會404popstate事件
每當活動的歷史記錄項發生變化時，將觸發popstate事件，例如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()或者history.forward()方法）。
3. 代碼實現
接下來我們用最簡單的代碼來實現這兩種路由
1) hash router
點此查看效果
實現思路是：監聽hashchange事件，然后更新對應的視圖。
html結構
<div id="app">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/topic">Topic</a></li>
<li><a href="#/about">About</a></li>
</ul>
<div id="content"></div>
</div>
js代碼
class HashRouter{
constructor(){
this.currentPath = '/';
this.routes = {}
}
init(){
//DOMContentLoaded事件用于刷新頁面后
window.addEventListener('DOMContentLoaded', this.updateView.bind(this))
window.addEventListener('hashchange', this.updateView.bind(this))
}
updateView(){
this.currentPath = location.hash.substring(1) || '/'
this.routes[this.currentPath] && this.routes[this.currentPath]()
}
route(path, callback){
this.routes[path] = callback
}
}
const router = new HashRouter();
router.init();
router.route('/', function(){
document.getElementById('content').innerHTML = 'This is Home'
})
router.route('/topic', function(){
document.getElementById('content').innerHTML = 'This is Topic'
})
router.route('/about', function(){
document.getElementById('content').innerHTML = 'This is About'
})
2) history router
history router稍微麻煩一點，我們先思考下，對于一個應用而言，url 的改變(不包括 hash 值得改變)只能由下面三種情況引起：
- 點擊瀏覽器的前進或后退按鈕 => 可以監聽popstate事件
- 點擊 a 標簽
- 在 JS 代碼中觸發 history.pushState()、history.replaceState()
所以history router的實現思路是：監聽頁面中和路由有關的a標簽點擊事件，阻止默認的跳轉行為，然后調用history.pushState()方法，讓瀏覽器記住路由，然后手動更新相應視圖。同時為了監聽用戶手點擊瀏覽器的前進后退按鈕，還需要監聽popstate事件，動態的修改相應視圖。
html結構
<div id="app">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/topic">Topic</a></li>
<li><a href="/about">About</a></li>
</ul>
<div id="content"></div>
</div>
js代碼
class HistoryRouter{
constructor(){
this.currentPath = '/';
this.routes = {}
}
init(){
//DOMContentLoaded事件用于刷新頁面后
window.addEventListener('DOMContentLoaded', this.updateView.bind(this, '/'))
var that = this
window.addEventListener('click', function (ev) {
if(ev.target.tagName.toLocaleLowerCase() === 'a' && ev.target.getAttribute('data-href')) {
ev.preventDefault()
var path = ev.target.getAttribute('data-href');
history.pushState({ path: path }, '', path)
that.updateView(path)
}
})
window.addEventListener('popstate', function (ev) {
if(ev.state){
var path = ev.state.path
that.updateView(path)
}else{
that.updateView('/')
}
})
}
updateView(path){
this.currentPath = path
this.routes[this.currentPath] && this.routes[this.currentPath]()
}
route(path, callback){
this.routes[path] = callback
}
}
var router = new HistoryRouter();
router.init();
router.route('/', function(){
document.getElementById('content').innerHTML = 'This is Home'
})
router.route('/topic', function(){
document.getElementById('content').innerHTML = 'This is Topic'
})
router.route('/about', function(){
document.getElementById('content').innerHTML = 'This is About'
})
