前端面试之 Vue 路由 Hash 与 History 区别大剖析

在前端面试中，Vue 路由是必考点之一，其中 Hash 和 History 模式是面试官偏爱的考点。今天，我们就来深入剖析 Hash 和 History 模式之间的爱恨纠葛，助你化解面试难题，拿下高分！

Hash 模式 vs History 模式：缘起与分野

Hash 模式和 History 模式是 Vue 路由中的两种路由模式，它们在表现形式和原理上有着显著差异。

Hash 模式

Hash 模式使用 URL 片段（#）来表示不同的页面状态。当用户访问不同的页面时，URL 片段会发生变化，但页面不会重新加载。这种模式的优点在于：

• 兼容性好，支持所有浏览器。
• 刷新页面后，页面状态（滚动位置等）可以得到保留。
• 可以通过后退/前进按钮进行页面导航。

但 Hash 模式也有它的缺点：

• URL 中存在丑陋的 # 号。
• 无法通过服务器端渲染。
• 可能会影响 SEO 排名。

History 模式

History 模式利用了 HTML5 中的 history API 来管理路由。它直接修改浏览器的历史记录，不会在 URL 中添加 # 号。这种模式的优点在于：

• URL 更简洁美观。
• 支持服务器端渲染。
• 有利于 SEO 排名。

但 History 模式也存在一些缺点：

• 不兼容老版本浏览器。
• 刷新页面后，页面状态（滚动位置等）会丢失。
• 无法通过后退/前进按钮进行页面导航，需要使用 pushState 和 replaceState 手动控制历史记录。

场景选择：因需而异

那么，在实际开发中，我们该如何选择 Hash 模式和 History 模式呢？下面提供一些建议：

• 如果需要兼容老版本浏览器，或者需要保留页面状态，可以使用 Hash 模式。
• 如果需要简洁美观的 URL，支持服务器端渲染，并且不需要兼容老版本浏览器，可以使用 History 模式。
• 在实际项目中，可以根据不同的需求和场景灵活切换两种模式。

实战案例：一个值得思考的抉择

在一次前端面试中，面试官抛出了这样一个问题：

"在一个需要 SEO 的单页面应用（SPA）中，你会选择 Hash 模式还是 History 模式？为什么？"

经过一番思索，我给出了以下回答：

"我会选择 History 模式，因为它更利于 SEO 排名。虽然 Hash 模式可以兼容老版本浏览器，但考虑到 SEO 的重要性，我愿意牺牲对老版本浏览器的支持。另外，History 模式可以通过服务器端渲染来解决页面状态丢失的问题。"

面试官对我的回答表示满意，认为我综合考虑了多种因素，做出了一个合理的决策。

总结

Hash 模式和 History 模式是 Vue 路由中的两种重要模式，它们各有优缺点。开发者在选择时，需要根据实际需求和场景进行权衡。通过深入理解它们的原理和区别，你可以在前端面试中脱颖而出，展现你的专业素养。