html hash 路由跳转页面,两种前端路由（hash模式和history模式）实现原理解析及区别...

目前单页应用(SPA)越来越成为前端主流，单页应用一大特点就是使用前端路由，由前端来直接控制路由跳转逻辑，而不再由后端人员控制，这给了前端更多的自由。

目前前端路由主要有两种实现方式：hash模式和history模式，下面分别详细说明。

hash模式

这个我们应该不陌生，比如在用超链接制作锚点跳转的时候，就会发现，url后面跟了"#id"，hash值就是url中从"#"号开始到结束的部分//纷享销客系统采取的就是hash模式

https://www.fxiaoke.com/XV/Home/Index#plan

https://www.fxiaoke.com/XV/Home/Index#approve

https://www.fxiaoke.com/XV/Home/Index#crm/index

hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取当前的hash值，并根据hash值来修改页面内容，则达到了前端路由的目的。

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

• 首页

• 资讯

• 个人中心

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 = '

这是首页内容

'

break

case '#news':

app.innerHTML = '

这是新闻内容

'

break

case '#user':

app.innerHTML = '

这是个人中心内容

'

break

default:

app.innerHTML = '

404

'

}

}

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

let route = self.routers[i]

if(hash===route.path){

callback(route.render())

return

}

}

}

}

}

let router = new Router()

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

return '

这是首页内容

'

})

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

return  '

这是新闻内容

'

})

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

return  '

这是个人中心内容

'

})

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.fxiaoke.com#plan/index  //hash模式路由

https://www.fxiaoke.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][,url]);//向历史记录中追加一条记录

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

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：

• 首页

• 资讯

• 个人中心

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 = '

这是首页内容

'

break

case '/news':

app.innerHTML = '

这是新闻内容

'

break

case '/user':

app.innerHTML = '

这是个人中心内容

'

break

default:

app.innerHTML = '

404

'

}

}

//监听浏览器前进后退事件，并根据当前路径渲染页面

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

let route = this.routers[i]

if(path===route.path){

this.renderCallback(route.render())

return

}

}

}

}

let router = new Router()

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

return '

这是首页内容

'

})

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

return  '

这是新闻内容

'

})

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

return  '

这是个人中心内容

'

})

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错误