路由的 hash 和 history 模式的区别
Vue-Router 有两种模式：hash 模式和 history 模式。默认的路由模式是 hash 模式。
1. hash 模式
1.1 简介
hash 模式是开发中默认的模式，它的 URL 带着一个#;
例如：http://www.abc.com/#/vue，它的 hash 值就是**#/vue**。
1.2 特点
- hash 值会出现在 URL 里面，但是不会出现在 HTTP 请求中，对后端完全没有影响。所以改变 hash 值，不会重新加载页面。
- 这种模式的浏览器支持度很好，低版本的 IE 浏览器也支持这种模式。
- hash路由被称为是前端路由，已经成为 SPA（单页面应用）的标配。
1.3 原理！！！
hash 模式的主要原理就是 onhashchange() 事件
好处：
在页面的 hash 值发生变化时，无需向后端发起请求，window 就可以监听事件的改变，并按规则加载相应的代码
hash 值变化对应的 URL 都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退
虽然是没有请求后端服务器，但是页面的 hash 值和对应的 URL 关联起来了。
// js中有一个事件hashchange
window.onhashchange = function() {
// 可以获取到app的data值，也可以设置值
// console.log(app.currentCom)
// 获取锚点值
let curhash = location.hash.slice(1)
console.log(curhash)
switch (curhash) {
case '/login':
app.currentCom = 'login'
break
case '/reg':
app.currentCom = 'reg'
break
case '/index':
app.currentCom = 'index'
break
}
}
2. history 模式
2.1 简介
history 模式的 URL 中没有#，它使用的是传统的路由分发模式，即用户在输入一个 URL 时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。
2.2 特点
-
当 使 用 history 模 式 时 ， URL 就 像 这 样 ：http://abc.com/user/id。相比 hash 模式更加好看。
-
history模式需要后台配置支持，如果后台没有正确配置，访问时会返回 404。
-
API： history api 可以分为两大部分，切换历史状态和修改历史状态：
-
修 改 历 史 状 态 ：
-
包 括 了 HTML5 History Interface 中 新 增 的**
pushState()** 和replaceState()方法，这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了 url，但浏览器不会立即向后端发送请求。如果要做到改变 url 但又不刷新页面的效果，就需要前端用上这两个 API。 -
切换历史状态：
-
包括
forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作。 -
虽然 history 模式丢弃了丑陋的#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出 404 来。
-
如果想要切换到 history 模式，就要进行以下配置（后端也要进行配置）
const router = new VueRouter({ mode:'history', routes:[...] })
-
3. 两种模式对比
- 调用 history.pushState() 相比于直接修改 hash，存在以下优势：pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的URL；
- pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
- pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
- pushState() 可额外设置 title 属性供后续使用。
- hash 模式下，仅 hash 符号之前的 url 会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回 404 错误；
- history 模式下，前端的 url 必须和实际向后端发起请求的 url 一致，如果没有对用的路由处理，将返回 404 错误。
- hash 模式和 history 模式都有各自的优势和缺陷，还是要根据实际情况选择性的使用。