两种前端路由(hash模式和history模式)实现原理解析及区别

    |     2020年3月27日   |   html/css/js, web前端技术   |     0 条评论   |    1485

目前单页应用(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值来修改页面内容,则达到了前端路由的目的。

1. 实现原理:

//打开浏览器控制台执行如下代码
window.onhashchange = () => {
    console.log('hash :',location.hash);
    switch (location.hash) {
        case '#index':
            console.log('index>>>>');
            break
        case '#news':
             console.log('news>>>>');
            break
        default:
            console.log('404>>>>');
    }
}
location.hash = '#index'

location.hash = '#news'
 
location.hash = '#other'

 

2. 利用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()

这样我们就实现了一个简单的hash路由。

history模式

hash模式看起来是比较丑的,都带个"#"号,我们也可以采取history模式,history就是我们平时看到的正常的连接形式

https://www.47.109.74.84#plan/index  //hash模式路由 
 
https://www.47.109.74.84/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进行调整即可。

1. 实现原理

//浏览器控制台执行下列测试代码
window.onpopstate = (e) => {   
    const path = location.pathname;
    console.log('path :',path);
    switch (path) {
        case '/index':
            console.log('这是首页内容')
            break
        case '/news':
            console.log('这是新闻内容')
            break
        default:
            console.log('404找不到资源')
    }
}
/**
使用方法
pushState(state, title, url)

参数说明
state: 可以通过history.state读取
title: 可选参数,暂时没有用,建议传个短标题
url: 改变过后的url地址
*/
history.pushState({page: 1}, "title 1", "/index");
window.history.pushState({page:1},'','http://www.47.109.74.84/index')
popstate事件说明

当用户在浏览器点击进行后退、前进,或者在js中调用histroy.back()history.go()history.forward()等,会触发popstate事件;但pushState、replaceState不会触发这个事件。

那么如何监听 pushState 和 replaceState 的变化呢?具体可参考该文 如何监听URL的变化?

window.addEventListener('pushState', function(e) {
  console.log('THEY DID IT AGAIN! pushState 2222222');
});

2. 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进行跳转,初始化时更改所以超链接的跳转方式

当然,上面这个实现只是一个非常初级的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错误
转载请注明来源:两种前端路由(hash模式和history模式)实现原理解析及区别
回复 取消