Web前端最全你好，谈谈你对前端路由的理解(1)，字节跳动历年Web前端中高级面试题全收录

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

通过分析哈希模式和历史模式的实现原理，让大家对前端路由的原理有一个更深刻的理解。

哈希模式

a 标签锚点大家应该不陌生，而浏览器地址上 # 后面的变化，是可以被监听的，浏览器为我们提供了原生监听事件 hashchange ，它可以监听到如下的变化：

• 点击 a 标签，改变了浏览器地址

• 浏览器的前进后退行为

• 通过 window.location 方法，改变浏览器地址

接下来我们利用这些特点，去实现一个 hash 模式的简易路由：在线运行

• page1
• page2
• 当然，这是很简单的实现，真正的 hash 模式，还要考虑到很多复杂的情况，大家有兴趣就去看看源码。

  浏览器展示效果如下：

  历史模式

  history 模式会比 hash 模式稍麻烦一些，因为 history 模式依赖的是原生事件 popstate ，下面是来自 MDN 的解释：

  

  image.png

  小知识：pushState 和 replaceState 都是 HTML5 的新 API，他们的作用很强大，可以做到改变浏览器地址却不刷新页面。这是实现改变地址栏却不刷新页面的重要方法。

  包括 a 标签的点击事件也是不会被 popstate 监听。我们需要想个办法解决这个问题，才能实现 history 模式。

  

  image.png

  **解决思路：**我们可以通过遍历页面上的所有 a 标签，阻止 a 标签的默认事件的同时，加上点击事件的回调函数，在回调函数内获取 a 标签的 href 属性值，再通过 pushState 去改变浏览器的 location.pathname 属性值。然后手动执行 popstate 事件的回调函数，去匹配相应的路由。逻辑上可能有些饶，我们用代码来解释一下：在线地址
• page1
• page2
• 这里注意，不能在浏览器直接打开静态文件，需要通过 web 服务，启动端口去浏览网址。

  总结

  –

  最后

  正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  这里注意，不能在浏览器直接打开静态文件，需要通过 web 服务，启动端口去浏览网址。

  总结

  –

  最后

  正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-ONLOp88B-1715880389109)]