哈尔滨企业展示型网站建设,正安县网站seo优化排名,做网站背景图片浪漫爱情,乐潍清网站额建设hash模式 hash模式是一种把前端路由的路径用井号 # 拼接在浏览器 URL 后面的模式。
一个完整的 URL 包括#xff1a;协议、域名、端口、虚拟目录、文件名、参数、锚。
https://www.wangyuegyq.top/utils/index.html?name123phone123#home协议#xff1a;https域名协议、域名、端口、虚拟目录、文件名、参数、锚。
https://www.wangyuegyq.top/utils/index.html?name123phone123#home协议https域名www.wangyuegyq.top端口号443https默认端口号是443http默认端口号是80默认端口号可以不写虚拟目录/utils文件名index.html参数name123phone123锚部分home#后面的值
hash作用 路由 hash值的变化会触发hashchange事件这样我们就可以通过监听hashchanges事件来根据不同的hash值去渲染不同的UI以实现路由切换的目的。 更改路由方式 1a标签 2location.hash、location.href 3浏览器前进后退按键或者history.back、history.go、history.forward 4history.pushState、history.replaceStateH5 history 新特性 diva href#home首页/aa href#article文章/adiv idcontent/div
/div
scriptwindow.onhashchange (event) {const hash window.location.hash;const content document.getElementById(content);if (hash #home) {content.innerHTML 首页; } else if (hash #article) {content.innerHTML 文章; }}
/script定位 hash也称作锚点DOM id 结合可以用于页面定位。 div
span idhash-position定位点/span
a href#hash-position点击定位/a
/divhash特点 hash的改变不会访问服务器不会刷新页面hash 值是网页的标志位HTTP 请求不包含锚部分不会发送给服务器对后端无影响 hash的改变会触发hashchange监听事件 hash的改变会改变浏览器的历史记录 这也是为什么当hash的改变(hash的改变会记录在window.hisotry中)不仅仅可以出触发hashchange事件还会触发popstate事件监听history对象变化的事件
注意事项 1. 如果改变的hash值与当前的hash值一致时hashchang不会改变但是popstate事件会执行location.href更改时执行但是location.hash更改时不会执行两者执行时都不会创建一条新的历史记录。
2. 哪怕新的hash值和当前的hash值相同时history.pushState方法会创建一条新的历史记录
更多内容访问:
history hash 单页面应用和多页面应用 React-Router源码分析-History库 History库源码分析-Action 动作类型 History库源码分析-createLocation History库源码分析-createPath History库源码分析-parsePath
