用来做什么

对于现代开发的项目来说，稍微复杂一点的 SPA ，都需要用到路由。近几年来，通过不断的版本迭代， vue 和 react 两大技术栈脱颖而出，成为当下最受欢迎的两大技术栈。

vue-router 正是 vue 的路由标配，且 vue-router 有两种模式： hash 和 history 。

SPA(单页面应用)

SPA，即单页面应用(Single Page Application)。

所谓单页 Web 应用，就是只有一张 Web 页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML 、 CSS 和 JavaScript ，所有的操作都在这张页面上完成，都由 JavaScript 来控制。

优点：

· 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

· 基于上面一点，SPA 相对对服务器压力小；

· 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

· 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

· 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

· SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

Hash模式

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会发 onhashchange 事件。

2、网页url组成部分

属性	含义
location.protocal	协议
location.hostname	主机名
location.host	主机
location.port	端口号
location.patchname	访问页面
location.search	搜索内容
location.hash	哈希值

例如：

//http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb 
location.protocal // 'http:' 
localtion.hostname // '127.0.0.1' 
location.host // '127.0.0.1:8001' 
location.port //8001 
location.pathname //'01-hash.html' 
location.serach // '?a=100&b=20' 
location.hash // '#/aaa/bbb'

hash特点

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

History模式

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

属性

history.pushState(data, title [, url])

pushState主要用于往历史记录堆栈顶部添加一条记录。

各参数解析如下：

data会在onpopstate事件触发时作为参数传递过去；

title为页面标题，当前所有浏览器都会忽略此参数；

url为页面地址，可选，缺少时表示为当前页地址

history.replaceState(data, title [, url])

更改当前的历史记录，参数同上；上面的pushState是添加，这个更改

history特点

· 新的 url 可以是与当前 url 同源的任意 url ，也可以是与当前 url 一样的地址，但是这样会导致的一个问题是，会把重复的这一次操作记录到栈当中。

· 通过 history.state ，添加任意类型的数据到记录中。

· 可以额外设置 title 属性，以便后续使用。

· 通过 pushState 、 replaceState 来实现无刷新跳转的功能。

对于 history 来说，确实解决了不少 hash 存在的问题，但是也带来了新的问题。具体如下：

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

详谈路由原理hash和history