提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  IT要闻

当前栏目

【面试题】hash 与 history 路由的实现原理

2023-02-18 16:29:04 时间

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

今日分享: 【面试题】hash 与 history 路由的实现原理

实现路由的方式：hash模式 和 history模式 两种方式，不论是 angular、vue 还是 React都是这样实现的。

hash 路由：

哈希路由把路由的路径用 # 拼接在 url 后面,当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。

hash有三个特点:

1. hash 可以改变 url ,但是不会刷新页面, 这并不算是一次 http 请求，所以这种模式不利于 SEO 优化

2. hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能

3. hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）

底层实现原理

React 中基于hash 的 hashRouter, 监听hanshchange事件获取当前的路径

代码如下： 

<body>
    <a href="#/a">跳转到/a</a>
    <a href="#/b">跳转到/b</a>
    <div id="root"></div>
</body>
<script>
    let container = document.getElementById('root');
    window.addEventListener('hashchange', event => {
        console.log(event)
        // container.innerHTML = event.newURL
        container.innerHTML = `当前的路由为${window.location.hash.slice(1)}`
    })
</script>

‍

解析：

hash即URL中“#”字符后面的部分。使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置，故而又称之为锚点。hash还有另一个特点，它的改变不会导致页面重新加载，因此在单页应用流行的当下，它的用处就更多了。通过window.location.hash属性获取和设置hash值。

hashchange事件，顾名思义，就是hash改变时触发的事件。

window.location.hash值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏hash值的变化也会触发window.location.hash值的变化，从而触发onhashchange事件。

history路由:

1. 更新页面而不发送 http 请求

2. 使用 history 模式时，需要通过服务端来允许地址可访问

3. 新的 url 可以是与当前 url 同源的任意 url ，也可以是与当前 url 一样的地址

4. 通过 history.state ，添加任意类型的数据到记录中。

5. 通过 pushState 、 replaceState 来实现无刷新跳转的功能。

底层实现原理

React 中基于history 实现的BrowserRouter, 通过 onpopstate事件和自定义的 onpushstate事件实现

代码：

<body>
<div id="root" style="border:3px solid red;height:200px"> </div>
<button onclick="push('/a')">/a</button>
<button onclick="push('/b')">/b</button>
<button onclick="push('/c')">/c</button>
<script>
let container = document.getElementById('root');
//监听弹出状态的事件 浏览器上的后退按钮
window.onpopstate = function (event) {
//console.log(event);
            container.innerHTML = event.state.to;
        }
// 自定义实现压栈状态的事件，这个事件window上是没有的
function push(to) {
// 参数一 状态
// 参数二 标题 没有用到
// 参数三 跳转的路径
window.history.pushState({to},null,to)
        }
// 覆写window.history.pushState方法
// 1.先保存一下原有的方法
const pushState = window.history.pushState;
// 2.覆写
window.history.pushState = function(state,title,url){
// 3.调用系统的该方法
            pushState.call(window.history,state,title,url);
// 4.调用自定义的onpushstate事件
window.onpushstate(state,title,url)
        }
// 5.将事件定义在window属性上 浏览器的前进按钮
window.onpushstate = function(state,title,url) {
            container.innerHTML = state.to || url
        }
</script>
</body>

解析：

1、popstate用来做什么的？

简而言之就是HTML5新增的用来控制浏览器历史记录的api。

2、过去如何操纵浏览器历史记录？

window.history对象，该对象上包含有length和state的两个值，在它的__proto__上继承有back、forward、go等几个功能函数

在popstate之前，我们可以利用back、forward、go对history进行后退和前进操作。

例如：

history.back(); (后退一步，使用history.go(-1)也可实现后退效果)

弊端：只能操作前进后退，但是无法控制前进后要去哪，history.length都只会维持原来的状态

3、popstate的怎么用？

HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。

pushState、replaceState两者用法差不多。

使用方法：

history.pushState(data,title,url);

//其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；

replaceState用法类似，例如：history.replaceState("首页","",location.href+ "#news");

两者区别：pushState会改变history.length，而replaceState不改变history.length

苟有恒 , 何必三更眠五更起

相关文章