目前单页应用(SPA)愈来愈成为前端主流,单页应用一大特色就是使用前端路由,由前端来直接控制路由跳转逻辑,而再也不由后端人员控制,这给了前端更多的自由。html
目前前端路由主要有两种实现方式:hash模式和history模式,下面分别详细说明。前端
hash模式
这个咱们应该不陌生,好比在用超连接制做锚点跳转的时候,就会发现,url后面跟了"#id",hash值就是url中从"#"号开始到结束的部分node
hash值变化浏览器不会从新发起请求,可是会触发window.hashChange事件,假如咱们在hashChange事件中获取当前的hash值,并根据hash值来修改页面内容,则达到了前端路由的目的。后端
html:菜单中href设置为hash形式,id为app中放置页面内容api
<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 = hashChangeapp
hashChange()
上面这个实现方式比较简陋,咱们能够再封装一下函数
class Router {this
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 } } } }
}url
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错误