为了解决 Hash 模式 URL 不美观的问题，HTML5 标准在 history 对象上增加了新的 API。 这就是 History 模式的基础。 在 HTML4 时代， window.history 只能用于前进（forward）、后退（back）和跳转（go）。 HTML5 新增了两个关键方法，允许我们在 不刷新页面 的情况下修改 URL： history.pushState (state, title, url)：向历史记录堆栈中添加一条新记录。 history.replaceState (state, title, url)：修改当前的历史记录。

本文详细介绍了前端路由的由来，重点对比了hash模式和history模式的区别。 hash模式适用于低版本浏览器，url带#，不刷新页面但不提交服务器；history模式提供更美观的url，刷新时会重新请求服务器，需后端配合处理。 选择模式时需考虑兼容性、外观和后端支持。

本文详细比较了VueRouter中的Hash模式（基于URLhash）和History模式（利用HTML5HistoryAPI），阐述了它们的实现原理、优缺点以及服务端配置。

Vue Router 中的 History 和 Hash 模式是实现单页面应用（SPA）无刷新导航的两种核心方式，它们在工作原理、兼容性和使用场景上有着明显的区别。 为了让你快速把握全局，下面这个表格汇总了它们的核心差异。

一、什么是路由？ 在 Web 开发中， 路由（Route） 是 URL 与资源 之间的映射关系。 服务端路由：传统多页应用（MPA）里，浏览器每跳转一次 URL，都会向服务器发起一次新的请求，服务器根据 URL 返回不同的 HTML 页面…

路由系统不仅负责URL与视图的映射，更承担着状态同步、权限控制、代码分割等关键职责。 本文将从计算机科学视角深度剖析前端路由的三大支柱： 路由模式（Hash vs History） 、 路由守卫（Navigation Guards） 以及 动态路由（Dynamic Routing），结合源码原理与框架 ...

你是否曾经困惑：为什么单页应用（SPA）在不刷新页面的情况下，URL还能悄悄变？ 今天，我们就来揭开前端路由的神秘面纱，带你用最通俗的方式理解 哈希路由 和 history路由 的实现原理！ 🚀

本文旨在阐明前端路由的核心机制，深入对比hash与history两种模式的实现原理、API差异及服务端配置等核心区别，为开发者在不同业务场景下进行技术选型提供清晰指引。

你是否曾经困惑：为什么 单页应用 （SPA）在不刷新页面的情况下，URL还能悄悄变？ 今天，我们就来揭开 前端路由 的神秘面纱，带你用最通俗的方式理解 哈希路由 和 history路由 的实现原理！ 🚀

history 路由这么好用，为什么SPA应用还会提供 hash 路由呢？ 前几天在辅导一个同学的时候，他突然问我一句： “为什么很多单页应用默认都是 hash 路由呀？ 现在不是都推荐用 history 路由了吗？ ”