Vue路由的hash与history

Vue路由提供了两种模式：hash模式和history模式。

理解这些概念前我们先普及另两个概念多页面应用、单页面应用

多页面应用（MPA Multi-page Application）：

多页面跳转需要刷新所有资源，每个公共资源(js、css等)需选择性重新加载
页面跳转：使用window.location.href = “./index.html”进行页面间的跳转；
数据传递：可以使用path?account=”123”&password=””路径携带数据传递的方式，或者localstorage、cookie等存储方式
url 模式：a.com/pageone.html

单页面应用（SPA Single-page Application）：

只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次
页面跳转：利用hash去封装路由；
数据传递：可通过全局变量或者参数传递，进行相关数据交互 　
url 模式： a.com/#/pageone

SPA （single-page application）指的是 一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过路由来实现，公共资源部分只加载一次。
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面（不重新向后端发出请求）
vue-router意义在于帮你快速的构建单页面应用

vue-router在实现单页面的前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。（默认Hash）

这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前URL改变了，但浏览器不会刷新页面(请求后端)，这就为单页应用前端路由“更新视图但不重新请求”提供了基础。
浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。

Hash模式：
在hash模式下，URL中的路由路径将以#符号后面的内容来表示。例如：http://example.com/#/home。当URL的hash发生变化时，浏览器不会重新加载页面，而是通过监听hashchange事件来切换路由。

原理：
浏览器的URL中的hash部分发生变化时，会触发浏览器的hashchange事件，Vue路由根据监听到的事件来更新页面的路由状态。

特点：
1、hash变化会触发网页跳转，即浏览器的前进和后退。
2、hash 可以改变 url ，但是不会触发页面重新加载（hash的改变是记录在 window.history 中），即不会刷新页面。也就是说，所有页面的跳转都是在客户端进行操作。因此，这并不算是一次 http 请求，所以这种模式不利于 SEO 优化。hash 只能修改 # 后面的部分，所以只能跳转到与当前 url 同文档的 url 。
3、hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。
4、hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）。

History模式：
基于html5 的history API ，pushState和replaceState，pushStateIE10以后才能用，使用pushState不会向服务端发送请求，只是改变客户端的url地址，同时将地址记录到历史记录中，用于实现客户端路由

在history模式下，URL中的路由路径不再使用#符号，而是直接使用正常的URL路径。例如：http://example.com/home。当URL发生变化时，浏览器会向服务器发送请求，服务器需要正确配置以返回正确的页面。

原理：
使用HTML5的History API，该API提供了pushState和replaceState方法，可以改变浏览器的URL，并且不会刷新页面。路由切换时，Vue会使用pushState或replaceState方法改变浏览器URL，并通过监听popstate事件来更新页面的路由状态。

特点：
1、新的 url 可以是与当前 url 同源的任意 url ，也可以是与当前 url 一样的地址，但是这样会导致的一个问题是，会把重复的这一次操作记录到栈当中。
2、通过 history.state ，添加任意类型的数据到记录中。
3、可以额外设置 title 属性，以便后续使用。
4、通过 pushState 、 replaceState 来实现无刷新跳转的功能。

缺点：
1、部署时需要服务器配置支持、兼容性略差（较老的浏览器不支持History API）
2、使用 history 模式时，在对当前的页面进行刷新时，此时浏览器会重新发起请求。如果 nginx 没有匹配得到当前的 url ，就会出现 404 的页面。
3、而对于 hash 模式来说， 它虽然看着是改变了 url ，但不会被包括在 http 请求中。所以，它算是被用来指导浏览器的动作，并不影响服务器端。因此，改变 hash 并没有真正地改变 url ，所以页面路径还是之前的路径， nginx 也就不会拦截。
• 因此，在使用 history 模式时，需要通过服务端来允许地址可访问，如果没有设置，就很容易导致出现 404 的局面。

两者区别：

• history模式使用正常的URL路径，更符合直觉，不需要#符号。但是，使用history模式需要服务器正确配置来返回正确的页面，否则会导致404错误。
• hash模式在URL中使用#符号来表示路由路径，可以在不同路由之间切换而不刷新页面。但是，由于#符号后面的内容对于服务器端来说是无效的，所以在使用hash模式时，服务器只需将index.html文件返回给浏览器，而不需要做其他配置。

总结
history.pushState()相比于hash的直接修改主要有以下优势：
pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
pushState可额外设置title属性供后续使用