本文深入解析前端单页应用（SPA）中两种主流路由模式：Hash与History。详细阐述Hash模式利用URL中#号及hashchange事件实现路由的原理，以及History模式基于HTML5 pushState API和popstate事件实现无刷新跳转的机制。通过对比两者在URL表现、浏览器兼容性、状态存储及后端配置需求上的差异，帮助开发者理解并选择适合的路由方案。
单页应用
当前，单页应用（SPA）已成为前端开发的主流架构。其核心特征之一是利用前端路由机制，由前端直接掌控页面跳转逻辑，取代了传统后端控制路由的方式，从而赋予前端开发更大的灵活性与自主权。
目前前端路由主要存在两种实现方案：Hash模式与History模式，下文将对这两种模式进行详细解析。
Hash模式
这种模式大家应该并不陌生，例如在使用超链接制作页面内锚点跳转时，URL末尾会跟随“#id”，这里的Hash值即指URL中从“#”符号开始直至末尾的部分。
Hash值的变化不会导致浏览器重新发起网络请求，但会触发window对象的hashChange事件。若我们在该事件监听器中获取当前Hash值，并据此动态修改页面内容，即可实现前端路由的效果。
HTML结构示例：菜单中的链接href属性设置为Hash形式，id为app的div用于放置页面内容。
<ul id="menu">
<li>
<a href="#index" rel="external nofollow" >首页</a>
</li>
<li>
<a href="#news" rel="external nofollow" >资讯</a>
</li>
<li>
<a href="#user" rel="external nofollow" >个人中心</a>
</li>
</ul><div id="app"></div>
JavaScript逻辑：在window.onhashchange事件中获取Hash值，根据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模式在视觉上显得不够美观，因为URL中带有“#”号。我们可以采用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调整URL并不会向后端发起请求，因此达到了前端路由的目的。
如果用户使用浏览器的前进后退按钮，则会触发window.onpopstate事件，监听页面根据路由地址修改页面内容。
也不一定非要用超链接，任意元素作为菜单都行，只要在点击事件中通过History进行调整即可。
HTML结构示例：
<ul id="menu">
<li>
<a href="/index" rel="external nofollow" >首页</a>
</li>
<li>
<a href="/news" rel="external nofollow" >资讯</a>
</li>
<li>
<a href="/user" rel="external nofollow" >个人中心</a>
</li>
</ul>
<div id="app"></div>JavaScript逻辑示例：
//改造超链接，阻止默认跳转，默认的跳转是会刷新页面的
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模式在URL表现上较丑，而History模式则显得较为优雅。
pushState设置的新URL可以是与当前URL同源的任意URL；而Hash只可修改#后面的部分，故只可设置与当前同文档的URL。
pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而Hash设置的新值必须与原来不一样才会触发记录添加到栈中。
pushState通过stateObject可以添加任意类型的数据到记录中；而Hash只可添加短字符串。
pushState可额外设置title属性供后续使用。
Hash兼容IE8以上，History兼容IE10以上。
History模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误。
以上就是Hash和History路由模式区别示例解析的详细内容，更多关于Hash History路由模式区别的资料请关注本站其它相关文章！