1、hash 路由模式

即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/home，hash 的值为 #/home。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

2、history 路由模式

主要利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。但值得注意的是，在访问二级页面的时候，做刷新操作，会出现 404 错误，那么就需要和后端人配合让他配置一下 apache 或是 nginx 的 url 重定向，重定向到你的首页路由上就 ok 了。下面 以 Node 后台为例：

// 解决vue 路由在 history刷新 404情况
router.get('*', async(ctx, next) => {
    if (ctx.url !== "/index.html") {
        console.log("在这里返回")
        ctx.body = str;
    } 
})

3、应用场景

这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

一般场景下，hash 和 history 是都可以的，除非你不想在 url 中出现 # 符号就可以使用路由的 history 模式，这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。

4、总结

• 1、在 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

• 2、在 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/article/id。如果后端缺少对 /article/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”