<ul id="menu">
    <li>
        <a href="#index" rel="external nofollow" >首頁(yè)</a>
    </li>
    <li>
        <a href="#news" rel="external nofollow" >資訊</a>
    </li>
    <li>
        <a href="#user" rel="external nofollow" >個(gè)人中心</a>
    </li>
</ul>

function hashChange(e){
    // console.log(location.hash)
    // console.log(location.href)
    //
    // console.log(e.newURL)
    // console.log(e.oldURL)
    let app = document.getElementById('app')
    switch (location.hash) {
        case '#index':
            app.innerHTML = '<h1>這是首頁(yè)內(nèi)容</h1>'
            break
        case '#news':
            app.innerHTML = '<h1>這是新聞內(nèi)容</h1>'
            break
        case '#user':
            app.innerHTML = '<h1>這是個(gè)人中心內(nèi)容</h1>'
            break
        default:
            app.innerHTML = '<h1>404</h1>'
    }
}

class Router {
constructor(){
    this.routers = []  //存放我們的路由配置
}
add(route,callback){
    this.routers.push({
        path:route,
        render:callback
    })
}
listen(callback){
    window.onhashchange = this.hashChange(callback)
    this.hashChange(callback)()  //首次進(jìn)入頁(yè)面的時(shí)候沒(méi)有觸發(fā)hashchange，必須要就單獨(dú)調(diào)用一下
}
hashChange(callback){
    let self = this
    return function () {
        let hash = location.hash
        console.log(hash)
        for(let i=0;i<self.routers.length;i++){
            let route = self.routers[i]
            if(hash===route.path){
                callback(route.render())
                return
            }
        }
    }
}
}
let router = new Router()
router.add('#index',()=>{
return '<h1>這是首頁(yè)內(nèi)容</h1>'
})
router.add('#news',()=>{
return ?'<h1>這是新聞內(nèi)容</h1>'
})
router.add('#user',()=>{
return ?'<h1>這是個(gè)人中心內(nèi)容</h1>'
})
router.listen((renderHtml)=>{
let app = document.getElementById('app')
app.innerHTML = renderHtml
})

<ul id="menu">
<li>
    <a href="/index" rel="external nofollow" >首頁(yè)</a>
</li>
<li>
    <a href="/news" rel="external nofollow" >資訊</a>
</li>
<li>
    <a href="/user" rel="external nofollow" >個(gè)人中心</a>
</li>
</ul>
<div id="app"></div>

//改造超鏈接，阻止默認(rèn)跳轉(zhuǎn)，默認(rèn)的跳轉(zhuǎn)是會(huì)刷新頁(yè)面的
document.querySelector('#menu').addEventListener('click',function (e) {
if(e.target.nodeName ==='A'){
    e.preventDefault()
    let path = e.target.getAttribute('href')  //獲取超鏈接的href，改為pushState跳轉(zhuǎn)，不刷新頁(yè)面
    window.history.pushState({},'',path)  //修改瀏覽器中顯示的url地址
    render(path)  //根據(jù)path，更改頁(yè)面內(nèi)容
}
})
function render(path) {
let app = document.getElementById('app')
switch (path) {
    case '/index':
        app.innerHTML = '<h1>這是首頁(yè)內(nèi)容</h1>'
        break
    case '/news':
        app.innerHTML = '<h1>這是新聞內(nèi)容</h1>'
        break
    case '/user':
        app.innerHTML = '<h1>這是個(gè)人中心內(nèi)容</h1>'
        break
    default:
        app.innerHTML = '<h1>404</h1>'
}
}
//監(jiān)聽(tīng)瀏覽器前進(jìn)后退事件，并根據(jù)當(dāng)前路徑渲染頁(yè)面
window.onpopstate = function (e) {
    render(location.pathname)
}
//第一次進(jìn)入頁(yè)面顯示首頁(yè)
render('/index')
上面這個(gè)寫(xiě)法太low，我們可以用類(lèi)封裝一下，通過(guò)add方法添加路由，通過(guò)pushState進(jìn)行跳轉(zhuǎn)，初始化時(shí)更改所以超鏈接的跳轉(zhuǎn)方式
class Router {
    constructor(){
    this.routers = []
    this.renderCallback = null
}
add(route,callback){
    this.routers.push({
        path:route,
        render:callback
    })
}
pushState(path,data={}){
    window.history.pushState(data,'',path)
    this.renderHtml(path)
}
listen(callback){
    this.renderCallback = callback
    this.changeA()
    window.onpopstate = ()=>this.renderHtml(this.getCurrentPath())
    this.renderHtml(this.getCurrentPath())
}
changeA(){
    document.addEventListener('click', (e)=> {
        if(e.target.nodeName==='A'){
            e.preventDefault()
            let path = e.target.getAttribute('href')
            this.pushState(path)
        }
    })
}
getCurrentPath(){
    return location.pathname
}
renderHtml(path){
    for(let i=0;i<this.routers.length;i++){
        let route = this.routers[i]
        if(path===route.path){
            this.renderCallback(route.render())
            return
        }
    }
}
}
let router = new Router()
router.add('/index',()=>{
return '<h1>這是首頁(yè)內(nèi)容</h1>'
})
router.add('/news',()=>{
return  '<h1>這是新聞內(nèi)容</h1>'
})
router.add('/user',()=>{
return  '<h1>這是個(gè)人中心內(nèi)容</h1>'
})
router.listen((renderHtml)=>{
let app = document.getElementById('app')
app.innerHTML = renderHtml
})