# React/Vue 中的 router 实现原理如何

Issue

欢迎在 Issue 中交流与讨论: Issue 463 (opens new window)

前端路由实现的本质是监听url变化,实现方式有两种:Hash模式和History模式,无需刷新页面就能重新加载相应的页面。 Hash url的格式为www.a.com/#/,当#后的哈希值发生变化时,通过hashchange事件监听,然后页面跳转。 History url通过history.pushStatehistory.replaceState改变url。 两种模式的区别:

  • hash只能改变#后的值,而history模式可以随意设置同源url;
  • hash只能添加字符串类的数据,而history可以通过API添加多种类型的数据;
  • hash的历史记录只显示之前的www.a.com而不会显示hash值,而history的每条记录都会进入到历史记录;
  • hash无需后端配置且兼容性好,而history需要配置index.html用于匹配不到资源的情况。
Last Updated: 1/17/2021, 2:02:56 PM