你好，谈谈你对前端路由的理解

原理

–

前端路由 插件比较火的俩框架对应的就是 Vue-Router 和 React-Router ,但是它们的逻辑，归根结底还是一样的，用殊途同归四个字，再合适不过。

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

哈希模式

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
• 最后

  我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

  篇幅有限，仅展示部分截图：