Vue history 和 hash 两种模式的优缺点

前端路由有两种常见的方式，一种是基于 history API 的 HTML 5 提供的模式，另一种是 URL 中的 Hash 模式。

日常我们不喜欢使用 URL 中有（#）的 Hash 模式

Hash 模式

路由默认使用的 hash 模式，因为在开发单页面应用中，我们不想因为刷新页面而失去应用的状态。当我们使用 hash 模式的时候，URL 中的 # 符号实际上是一个特殊的字符串，用来标识 URL 的锚点，当井号#后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发hashchange事件来更新路由状态，实现页面的切换。

所以，当我们在 Vue 中使用这章模式的时候，# 实际上是一个虚拟字符，用于标识当前页面的状态，不会影响正常页面的访问。

优缺点

优点：不会重新加载页面，支持 IE9 及以下浏览器

缺点：丑

HTML5 History 模式

history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。

优缺点

优点：好看

缺点：需要后端支持

一定要后端配合支持才行，否则会出现大量的 404。以最常用的 Nginx 为例，只需要在配置的 location / 中增加下面一行即可：

try_files $uri /index.html;

发现共同点没，这两种模式都是为了不刷新页面，这也就契合当下我们制作的单页面应用。