目前单页利用（SPA）越来越成为前端支流，单页利用一大特点就是应用前端路由，由前端来间接管制路由跳转逻辑，而不再由后端人员管制，这给了前端更多的自在。

目前前端路由次要有两种实现形式：hash模式和history模式，上面别离具体阐明。

hash模式
这个咱们应该不生疏，比方在用超链接制作锚点跳转的时候，就会发现，url前面跟了"#id"，hash值就是url中从"#"号开始到完结的局部

hash值变动浏览器不会从新发动申请，然而会触发window.hashChange事件，如果咱们在hashChange事件中获取以后的hash值，并依据hash值来批改页面内容，则达到了前端路由的目标。

html：菜单中href设置为hash模式，id为app中搁置页面内容

<ul id="menu">    <li>        <a href="#index">首页</a>    </li>    <li>        <a href="#news">资讯</a>    </li>    <li>        <a href="#user">集体核心</a>    </li></ul>

<div id="app"></div>
js：在window.onhashchange中获取hash值，依据不同的值，批改app中不同的内容，起到了路由的成果

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>这是首页内容</h1>'            break        case '#news':            app.innerHTML = '<h1>这是新闻内容</h1>'            break        case '#user':            app.innerHTML = '<h1>这是集体核心内容</h1>'            break        default:            app.innerHTML = '<h1>404</h1>'    }}

window.onhashchange = hashChange

hashChange()
下面这个实现形式比拟简陋，咱们能够再封装一下

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)()  //首次进入页面的时候没有触发hashchange，必须要就独自调用一下}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>这是首页内容</h1>'

})

router.add('#news',()=>{

return  '<h1>这是新闻内容</h1>'

})

router.add('#user',()=>{

return  '<h1>这是集体核心内容</h1>'

})

router.listen((renderHtml)=>{

let app = document.getElementById('app')app.innerHTML = renderHtml

})
实现一个Router类，通过add办法增加路由配置，第一个参数为路由门路，第二个参数为render函数，返回要插入页面的html；通过listen办法，监听hash变动，并将每个路由返回的html，插入到app中。

这样咱们就实现了一个简略的hash路由。

history模式
hash模式看起来是比拟丑的，都带个"#"号，咱们也能够采取history模式，history就是咱们平时看到的失常的连贯模式

https://www.baidu.com#plan/index //hash模式路由
https://www.baidu.com/plan/index //history模式路由

history模式基于window.history对象的办法

在HTML4中，曾经反对window.history对象来管制页面历史记录跳转，罕用的办法包含：

history.forward(); //在历史记录中前进一步

history.back(); //在历史记录中后退一步

history.go(n): //在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。

在HTML5中，window.history对象失去了扩大，新增的API包含：

history.pushState(data,title);//向历史记录中追加一条记录

history.replaceState(data,title);//替换当前页在历史记录中的信息。

history.state;//是一个属性，能够失去当前页的state信息。

window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()办法传入的data参数

history模式原理能够这样了解，首先咱们要革新咱们的超链接，给每个超链接减少onclick办法，阻止默认的超链接跳转，改用history.pushState或history.replaceState来更改浏览器中的url，并批改页面内容。因为通过history的api调整，并不会向后端发动申请，所以也就达到了前端路由的目标。

如果用户应用浏览器的后退后退按钮，则会触发window.onpopstate事件，监听页面依据路由地址批改页面内容。

也不肯定非要用超链接，任意元素作为菜单都行，只有在点击事件中通过history进行调整即可。

html：

<ul id="menu">

<li>    <a href="/index">首页</a></li><li>    <a href="/news">资讯</a></li><li>    <a href="/user">集体核心</a></li>

</ul>

<div id="app"></div>
js：

//革新超链接，阻止默认跳转，默认的跳转是会刷新页面的
document.querySelector('#menu').addEventListener('click',function (e) {

if(e.target.nodeName ==='A'){    e.preventDefault()    let path = e.target.getAttribute('href')  //获取超链接的href，改为pushState跳转，不刷新页面    window.history.pushState({},'',path)  //批改浏览器中显示的url地址    render(path)  //依据path，更改页面内容}

})

function render(path) {

let app = document.getElementById('app')switch (path) {    case '/index':        app.innerHTML = '<h1>这是首页内容</h1>'        break    case '/news':        app.innerHTML = '<h1>这是新闻内容</h1>'        break    case '/user':        app.innerHTML = '<h1>这是集体核心内容</h1>'        break    default:        app.innerHTML = '<h1>404</h1>'}

}

//监听浏览器后退后退事件，并依据以后门路渲染页面

window.onpopstate = function (e) {

render(location.pathname)

}

//第一次进入页面显示首页
render('/index')
下面这个写法太low，咱们能够用类封装一下，通过add办法增加路由，通过pushState进行跳转，初始化时更改所以超链接的跳转形式

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>这是首页内容</h1>'

})

router.add('/news',()=>{

return  '<h1>这是新闻内容</h1>'

})

router.add('/user',()=>{

return  '<h1>这是集体核心内容</h1>'

})

router.listen((renderHtml)=>{

let app = document.getElementById('app')app.innerHTML = renderHtml

})
当然，下面这个实现只是一个十分高级的demo，并不能用于真正的开发场景，只是加深对前端路由的了解。

hash模式和history模式的区别

hash模式较丑，history模式较优雅

pushState设置的新URL能够是与以后URL同源的任意URL；而hash只可批改#前面的局部，故只可设置与以后同文档的URL

pushState设置的新URL能够与以后URL截然不同，这样也会把记录增加到栈中；而hash设置的新值必须与原来不一样才会触发记录增加到栈中

pushState通过stateObject能够增加任意类型的数据到记录中；而hash只可增加短字符串

pushState可额定设置title属性供后续应用

hash兼容IE8以上，history兼容IE10以上

history模式须要后端配合将所有拜访都指向index.html，否则用户刷新页面，会导致404谬误