2024年Web前端最全你好，谈谈你对前端路由的理解，成长路线

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 通过 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 服务，启动端口去浏览网址。

  总结

  –

  这篇文章主要知识点集中在前端路由这块，能完全看完，并且把实现原理捋一遍，我想你应该对现代前端框架会有一个新的理解。没有新的理解的同学，来杭州打我，我不还手。

  作者：尼克陈

  来源：https://juejin.cn/post/6917523941435113486

  - EOF -

  推荐阅读  点击标题可跳转

  最后

  为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

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