我要评论目录
✅ 路由模式概述
单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。
要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashchange事件来实现的，history模式是通过pushstate方法+popstate事件来实现的。
一. 路由的hash和history模式的区别
vue-router有两种模式：hash模式和history模式。默认的路由模式是hash模式。
1. hash模式
◼️ 简介
hash模式（又称哈希路由）是开发中默认的模式，它的url带着一个#，例如：http://www.abc.com/#/vue，它的hash值就是#/vue。
◼️ 特点
hash值会出现在url里面，但是不会出现在http请求中，对后端完全没有影响，所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的ie浏览器也支持这种模式。 hash路由被称为是前端路由，已经成为spa（单页面应用）的标配。
◼️ 原理
hash模式的主要原理就是onhashchange()事件：
window.onhashchange = function(event){
console.log(event.oldurl, event.newurl);
let hash = location.hash.slice(1);
}
使用onhashchange()事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求，window就可以监听事件的改变，并按规则加载相应的代码。 除此之外，hash值变化对应的url都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器，但是页面的hash值和对应的url关联起来了。
2. history模式
◼️ 简介
history模式（又称历史路由）的url中没有#，它使用的是传统的路由分发模式，即用户在输入一个url时，服务器会接收这个请求，并解析这个url，然后做出相应的逻辑处理。
◼️ 特点
当使用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: [...]
})
✅ 小 结：
👉🏻 两者原理不同
hash模式的实现原理是通过监听hashchange事件来实现的。
history模式是通过调用history.pushstate方法(或者replacestate) 并且监听popstate事件来实现的。history.pushstate会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。
👉🏻 两者表现不同
hash模式会在地址栏中有#号，而history模式没有；同时由于history模式的实现原理用到h5的新特性，所以它对浏览器的兼容性有要求(ie >= 10)。
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模式都有各自的优势和缺陷，我们还是要根据实际情况选择性的使用。
二. 如何获取页面的hash变化
（1）监听$route的变化
// 监听,当路由发生变化的时候执行
watch: {
$route: {
handler: function(val, oldval){
console.log(val);
},
// 深度观察监听
deep: true
}
},
（2）window.location.hash读取#值 window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。
参考资料：vue路由和vue3总结
发表评论