共计 4938 个字符，预计需要花费 13 分钟才能阅读完成。
目前单页利用（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 谬误
