Vue Router原理及SPA页面刷新解析
Vue Router 是 Vue 官方的客户端路由解决方案。 客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。 Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。
SPA（单页应用）和传统网站最核心、最颠覆性的区别。官方文档的那句话确实需要一些背景知识来理解。
我用一个简单的比喻和详细的解释来帮你彻底弄明白。
核心比喻：大楼 vs 戏剧舞台
想象两种不同的体验：
1. 传统多页网站（如新闻站、电商）就像一栋大楼
每次你想去一个新的房间（页面），比如从“首页”到“产品页”，你必须**走出大楼，找到另一栋新大楼的入口，然后重新进入。
这个过程对应着：浏览器向服务器发送请求 -> 服务器返回一个全新的HTML页面 -> 浏览器卸载旧页面，加载并渲染新页面。
你会看到屏幕闪烁一下（白屏），因为整个页面都被替换了。虽然大楼结构类似，但每次都要重新建。
2. 单页应用（SPA）就像一个大型戏剧舞台
舞台（浏览器）只有一个，从一开始就加载了所有的布景、道具和演员（HTML, CSS, JavaScript）。
当剧幕改变时（用户点击链接），舞台本身不会变动。只是后台的工作人员（Vue Router）根据导演的指令（URL变化），快速地把一些布景挪走，把另一些布景和演员推上来。
观众（用户）看到的内容完全变了，但从没离开过这个舞台，整个切换过程流畅无中断。没有人跑去外面找新的舞台（服务器）。
技术细节：为什么不需要重新加载？
现在我们把比喻拆解成技术实现：
1. 初始加载（唯一的一次全量加载）
当你第一次访问 `https://example.com` 时，浏览器会向服务器请求这个地址。
服务器会返回一个**非常简单的HTML文件（通常就叫 `index.html`）。这个文件本身内容很少，它的核心作用是引入一个巨大的JavaScript包（你的Vue应用代码）。
浏览器加载并执行这个JavaScript包。至此，你的整个应用（所有页面组件、路由逻辑、功能）都已经下载到用户的浏览器内存中了。
2. “导航”或“切换页面”的真实过程
当用户点击一个链接（例如 `<router-link to="/about">`）时，Vue Router开始工作：
阻止默认行为：Vue Router首先会阻止浏览器向服务器发送新请求（这是`<a>`标签的默认行为）。
更新URL：接着，它使用浏览器的History API（例如 `history.pushState()`）悄悄地、在不刷新页面的情况下，改变浏览器地址栏的URL。这让用户感觉URL确实变了。
匹配组件：Vue Router根据新的URL，去检查你预先配置的路由表（`routes`数组），找出这个URL对应应该显示哪个Vue组件（比如`About.vue`）。
动态渲染：最后，也是最重要的一步，Vue Router会告诉Vue：“嘿，URL变了，现在请把`<router-view>`这个占位符里面的内容，从之前的`Home.vue`切换成新的`About.vue`组件。”
整个过程都是在浏览器内部完成的，只是JavaScript在操作已经下载好的组件代码，进行动态的隐藏、显示和渲染。没有新的网络请求发生，所以页面自然不会重新加载。
两种模式：Hash 和 History
Vue Router实现“改变URL但不刷新页面”有两种方式：
Hash 模式（`mode: 'hash'`）：URL中会带有一个 `#` 号，例如 `https://example.com/#/about`。
原理：浏览器发现`#`后面的部分（hash）变化时，**不会向服务器发起请求**，但会触发`hashchange`事件。Vue Router监听这个事件来知道URL变了。
这是最安全兼容性最好的模式，因为不需要服务器做任何特殊配置。
History 模式（`mode: 'history'`）：URL看起来和普通网站一样，例如 `https://example.com/about`。
原理：它利用了HTML5的History API（`pushState`, `replaceState`），允许JS直接操作浏览器的会话历史栈，从而修改URL且不引起页面刷新。
这种模式更美观，但需要服务器端支持。因为如果你直接访问 `https://example.com/about`，服务器必须能识别这个URL并返回那个唯一的 `index.html` 文件，否则会得到404错误。然后Vue Router在客户端才能接手，解析 `/about` 路径并渲染正确的组件。
总结
对于SPA应用，用户在浏览不同页面时，为什么不需要从服务器重新加载？
答： 因为整个应用已经在第一次访问时就全部加载到浏览器里了。之后的“页面切换”根本不是真正的跳转，而是Vue Router这个“交通指挥”在客户端（浏览器内）根据URL的变化，动态地切换显示不同的Vue组件。它通过History API等手段修改URL，制造出导航的错觉，但整个过程没有产生任何新的网络请求（获取数据的API请求除外），所以页面自然不会重新加载。
这种机制带来了极其流畅的、类似原生App的用户体验。