大厂面试题每日一题
极客时间返利平台，你可以在上边通过山月的链接购买课程，并添加我的微信 (shanyue94) 领取返现。
山月训练营之面试直通车 服务上线了，从准备简历、八股文准备、项目经历准备、面试、面经、面经解答、主观问题答复、谈薪再到入职的一条龙服务。

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

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 463 (opens new window)

Author

回答者: buzuosheng (opens new window)

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

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

Author

回答者: shfshanyue (opens new window)

前端路由有两种实现方式:

# history API

  • 通过 history.pushState() 跳转路由
  • 通过 popstate event 监听路由变化，但无法监听到 history.pushState() 时的路由变化

# hash

  • 通过 location.hash 跳转路由
  • 通过 hashchange event 监听路由变化

Author

回答者: zyzweb (opens new window)

@buzuosheng hash 的历史记录也会显示 hash 值,也会放到历史记录, chrome 102

Last Updated: 6/26/2022, 10:48:10 AM

← 36. 在 SSR 项目中如何判断当前环境时服务器端还是浏览器端 →