Vue-Router中hash模式和history模式的区别（纯文本总结版）

Vue-Router中hash模式和history模式的区别

其实hash 模式和 history 模式都属于浏览器自身的特性，并不是vue-router独有的，vue-router只是通过调用浏览器提供的接口利用这两个特性来实现前端路由。前端路由的核心也就是单页面应用的核心就是在不向服务器发送请求的前提下改变视图。hash模式就是#模式，在URL 中#和#后面的字符拼接起来就是hash值，hash 值虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，所以改变 hash 值不会重新加载页面。hash模式背后的原理其实是window对象的onhashchange事件，在通过onhashchange事件监听hash值的改变的同时切换视图，这就是通过hash模式实现前端路由的核心原理。其实hash模式是浏览器很早之前就支持的一种特性，优点就是兼容性特别好，有人会说#出现在url中比较难看是hash的一个缺点，但是我觉得这不能说成是缺点，因为在这种底层问题上要的就是性能和稳定，而不是什么好不好看。history模式是利用了浏览器的history对象的 pushState() 和 replaceState() 这两个方法，这两个方法接收的都是state状态对象，页面标题，页面地址url这三个参数，这两个方法应用于修改浏览器的历史记录栈，但是它们修改历史记录的时候，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求，这就是history实现前端路由的原理。在使用过程中，就像我之前说的那样，hash模式只有hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误，但是使用history模式时，前端的 URL 必须和实际向后端发起请求的 URL 一致，否则将返回 404 错误，这是要注意的地方，当然这个问题可以通过服务端配置解决。