【前言】本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想借着IT邦帮忙这个平台做整理+再复习。本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。若内容有误，还麻烦各路大神不吝于点出问题，感激不敬。
我们在使用 Vue Router 开发 SPA(单页应用程式)时有 Hash 和 History 两种模式
Hash Mode
hash 模式是 Vue Router 预设的形式最大的特徵就是网址会带上一个 #
https://example.com/#/
hash 模式的主要原理是透过 onhashchange() 事件举个例子
<a href="#a">a</a> //网址变成 https://example.com#a
当我们点击锚点时，网址会加上 # 并跳转到该位置并且跳转到网页中 id 为 a 的 Dom 元素位置而这个过程是浏览器自己的功能，既不会刷新页面也并不会向后端发送任何东西hash 模式就是监听这一现象例如
https://example.com/#/home // hash 值为 #/home
当我们改变网址中 # 后面的值，hash 值也就发生了变化，透过侦测这个变化对照路由表，前端模拟路由就知道应该渲染哪一个元件而这个跳页的过程，既不用重新发起请求，也不会刷新页面
要注意，虽然网址中有 #，但实际上我们发出请求时，永远只会送出 # 以前的部分
https://example.com/#/home // https://example.com/
https://example.com/#/user // https://example.com/
不管我们在哪一页，# 之后的路径或片段永远不会被传送
另外，虽然改变 hash 值并没有刷新页面也没有发送请求但 Vue Router 会帮我们增加浏览记录在浏览历史里让我们可以实现上一页下一页的操作
History Mode
history 模式则是使用浏览器本身 window.history 的功能来实现无刷新的路由切换和 Hash 模式的差异除了网址中没有 # 之外最大的差异就是当我们进行页面的切换时，我们的 url 也会被改变，我们会真的发出请求
简单来说，为了避免重刷页面hash 模式是我们永远都在同一个页面，但我们切换 hash，并监听 hash 来决定渲染哪一页history 模式则是我们真的重新请求一个新页面，但透过 HTML5 的 History API 来避免页面刷新
但因为我们真的会把 url 送出去，所以会遇到一些问题
// 假设我们在 home 页刷新
// hash
https://example.com/#/home // https://example.com/
https://example.com/#/user // https://example.com/ 因为 # 以后的内容不会被传送，我们不管在哪一页刷新 url 仍是一样的
// history
https://example.com/home // https://example.com/home
https://example.com/user // https://example.com/user
当我们使用 hash 模式时，不管我们 hash 值是多少，我们始终请求同一页，因此我们无论在哪一页进行刷新，都能够正确的获取 index.html，然后再跟据 hash 值去决定要渲染哪个元件但当我们使用 history 模式时，我们在输入 https://example.com/home 时，实际上期望的是 index.html，并根据路由表中的 home 参数来进行页面渲染，而非寻找 home.html 档案因为 home.html 实际上不存在，如果后端未正确处理，就会导致 404 错误