精通面试，秒懂路由中的hash和history

2023-11-04 18:29:46

缘起：面试官的“刁钻”问题

“小伙子，聊聊路由吧，hash和history两种路由模式有何区别？”

“路由？hash？history？”

面对面试官的提问，小王一时语塞，支支吾吾答不上来。

没错，路由是前端开发面试中的一个“高频考点”，许多面试官都喜欢考察应聘者对路由的理解。而hash和history两种路由模式更是重中之重，常常让求职者望而却步。

路由简介：SPA应用的基石

在当今的Web开发中，单页面应用（SPA）正变得越来越流行。与传统的Web应用不同，SPA不会在每次用户操作时重新加载整个页面，而是通过JavaScript动态地更新页面内容。

这种方式可以大大提高用户体验，但也会带来一个问题：由于URL不会发生变化，因此用户无法通过后退按钮或书签返回到之前的页面状态。

hash与history：殊途同归的路由模式

为了解决这个问题，路由便应运而生。路由允许我们在不重新加载页面的情况下改变URL，从而实现页面状态的管理。

目前，前端开发中最常用的路由模式有两种：hash和history。

hash模式 ：hash模式利用URL的hash部分（#号之后的部分）来实现路由。这种模式简单易用，兼容性好，但也有一个缺点：hash不会出现在浏览器的地址栏中，这可能会影响到SEO（搜索引擎优化）。
history模式 ：history模式利用浏览器的history API来实现路由。这种模式不会改变URL的hash部分，因此可以出现在浏览器的地址栏中，有利于SEO。但是，history模式对浏览器的兼容性要求较高，在某些旧版本浏览器中可能无法正常工作。

路由面试题解析：庖丁解牛，层层剖析

理解了路由的基本原理，我们再来看看面试官常问的路由面试题：

“hash和history两种路由模式有何区别？”

这个问题看似简单，但其实暗藏玄机。要回答好这个问题，需要对两种路由模式有深入的了解，并能准确地指出它们的异同点。

异同点解析

相同点 ：
- hash和history都是路由模式，都可以实现页面状态的管理。
- 两者都可以通过JavaScript动态地更新页面内容。
不同点 ：
- hash模式利用URL的hash部分来实现路由，history模式利用浏览器的history API来实现路由。
- hash不会出现在浏览器的地址栏中，history会出现在浏览器的地址栏中。
- hash对浏览器的兼容性要求较低，history对浏览器的兼容性要求较高。

面试官的潜台词：不仅仅是技术

通过对hash和history两种路由模式的分析，我们不难发现，面试官考察的不仅仅是应聘者的技术能力，还包括其对细节的把握能力和对问题的分析能力。

因此，在回答路由面试题时，除了要准确地指出两种路由模式的异同点之外，还可以适当加入一些自己的见解，例如：

路由进阶：实战技巧大放送

掌握了路由的基本原理和面试技巧之后，我们还可以更进一步，学习一些路由的实战技巧，以便在实际项目中更好地使用路由。

利用路由增强用户体验 ：
- 使用路由可以实现页面的无缝刷新，从而提高用户体验。
- 可以通过路由来管理页面的历史记录，让用户可以轻松地返回到之前的页面状态。
- 可以通过路由来实现页面的书签功能，方便用户收藏和分享页面。
利用路由提高SEO排名 ：
- 使用history模式可以使URL出现在浏览器的地址栏中，这有利于SEO。
- 可以通过路由来设置页面的title和description，这也有利于SEO。
- 可以通过路由来实现页面的静态化，这也有利于SEO。