vue-router路由模式的区别和原理

vue-router路由模式

一、vue-router前端路由有两种模式，hash模式和history模式

hash模式

就是指 url 后面的 # 号以及后面的字符。每次刷新页面时是直接更改 # 后的东西。

由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange事件（hashchange只能改变 # 后面的 url片段）；虽然 hash路径出现在URL中，但是不会出现在 HTTP请求中，对后端完全没有影响，因此改变 hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

history模式

包含 back、forward、go方法；history 模式 URL就要和后端进行一致，所以要改为 history也需要后端的配合，否则会报错；history 每次刷新会重新向后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！。

二、原理

hash 原理：灵活运用了 html的瞄点功能，改变 # 后的路径本质上是更换了当前页面的瞄点，所以不会刷新页面。通过监听浏览器的 onhashchange()事件变化，查找对应的路由规则。

history 原理： 利用 H5的 history中新增的两个API ：pushState()和 replaceState()和一个事件onpopstate监听URL变化。

三、优缺点

hash模式

优点：

• 兼容性强，达到 IE8；
• 除发送 ajax和资源请求外不会发送其他多余请求；
• 改变 # 后的路径不会自动刷新页面；
• 无需服务器进行配合；

缺点：

• 访问路径上包含 # ，不美观；
• 对于需要锚点功能的需求会与当前路由机制发生冲突；
• 重定向操作时，后段无法获取 url完整路径；

history模式

优点：

• 符合 url 地址规范，没有 # ，使用起来比较美观；
• 后端可以获取到完整的路由信息；
• 可以使用 history.state获取完整的路由信息；
• 可以进行修改历史记录，并且不会立刻向后端发起请求；

缺点：

• 兼容性只到IE10；
• 改变 url路径后会重新请求资源；
• 若访问的路由地址不存在时会报404，需服务端配合支持重定向返回统一的404页面；

如果对于项目没有硬性标准要求，可以直接使用 hash模式开发。