手机app制作网站,网络推广哪个平台好,wordpress表情插件,网站制作方案垂直领域获客目录
✅ 路由模式概述
一. 路由的hash和history模式的区别
1. hash模式
2. history模式
3. 两种模式对比
二. 如何获取页面的hash变化 ✅ 路由模式概述
单页应用是在移动互联时代诞生的#xff0c;它的目标是不刷新整体页面#xff0c;通过地址栏中的变化来决定内容区…目录
✅ 路由模式概述
一. 路由的hash和history模式的区别
1. hash模式
2. history模式
3. 两种模式对比
二. 如何获取页面的hash变化 ✅ 路由模式概述
单页应用是在移动互联时代诞生的它的目标是不刷新整体页面通过地址栏中的变化来决定内容区域显示什么内容。
要达成这个目标我们要用到前端路由技术具体来说有两种方式来实现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关联起来了。 hash模式是一种把前端路由的路径用 # 拼接在真实URL后面的模式。形式上hash模式url里面永远带着#号开发当中默认使用这个模式 原理是通过location.hash属性设置#后面的路径发生变化并且浏览器并不会重新发起请求 只要hash地址发生改变则会触发hashchange事件我们在事件中设置地址对应的视图展示 hash模式的浏览器兼容性较好就是看起来不够优雅。如果用户考虑url的规范那么就需要使用history模式因为history模式没有#号是个正常的url适合推广宣传 2. history模式
◼️ 简介
history模式又称历史路由的URL中没有#它使用的是传统的路由分发模式即用户在输入一个URL时服务器会接收这个请求并解析这个URL然后做出相应的逻辑处理。
◼️ 特点
当使用history模式时URL就像这样http://abc.com/user/id。相比hash模式更加好看。但是history模式需要后台配置支持。如果后台没有正确配置访问时会返回404。 history模式开发的SPA项目需要服务器端做额外的配置否则会出现刷新白屏链接分享失效。原因是页面刷新时浏览器会向服务器真的发出对这个地址的请求而这个文件资源又不存在所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。 ◼️ API
history api可以分为两大部分切换历史状态和修改历史状态
修改历史状态包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法这两个方法应用于浏览器的历史记录栈提供了对历史记录进行修改的功能。只是当他们进行修改时虽然修改了url但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果就需要前端用上这两个API。
切换历史状态 包括forward()、back()、go()三个方法对应浏览器的前进后退跳转操作。 虽然history模式丢弃了丑陋的#。但是它也有自己的缺点就是在刷新页面的时候如果没有相应的路由或资源就会刷出404来。 如果想要切换到history模式就要进行以下配置后端也要进行配置
const router new VueRouter({mode: history,routes: [...]
})history模式用到了HTML5中的history API允许开发者直接更新浏览器URL地址而不重新发起请求。 用到了history APIreplaceState、pushState、back、forward和go这个5个方法。 但是历史记录改变以后视图并不会更新我们需要在地址改变包括使用onpopstate事件监听历史记录的回退后重新设置视图 history兼容性不如hash模式而且浏览器在刷新的时候会按照路径发送真实的资源请求因此在线上部署基于historyAPI的单页面应用的时候一定要后端配合支持才行如果 URL 匹配不到任何静态资源则应该返回同一个 index.html 页面 ✅ 小 结 两者原理不同
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 同文档的 URLpushState() 设置的新 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}
},2window.location.hash读取#值 window.location.hash 的值可读可写读取来判断状态是否改变写入时可以在不重载网页的前提下添加一条历史访问记录。
参考资料vue路由和vue3总结
