扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章给大家分享的是有关vue-router的hash和history模式怎么区分，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
一、概念
为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。
前端路由的核心，就在于：改变视图的同时不会向后端发出请求。
为了达到这种目的，浏览器当前提供了以下两种支持：
1.hash——即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：/tupian/20230522/ 的值为 #/hello。
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。
只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
二、hash模式
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件：
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
} 
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网