您现在的位置是:首页 > Javascript
当前栏目
vue的hash和history模式
2023-04-18 15:03:34 时间
- 路由模块的本质就是建立起url和页面之间的映射关系。
- hash和history改变URL的同时不会重新加载页面和发送请求。
背景知识
- 早期的前端路由通过location.hash实现,其可以获取到url中#号及其后面的参数 hash路由模式的实现基于以下几个特性
- URL中的hash值只是客户端的一种状态,也就是说当向服务器发送请求时,hash部分不会被发送
- hash值的改变都会在浏览器的访问历史中增加一个记录,因此我们可以通过浏览器的前进、回退按钮控制hash的切换
- 可以通过a标签中的href属性或者js对location.hash进行赋值,来改变URL中的hash值
- 可以用hashchange事件监听hash值的变化,从而对页面进行跳转并渲染
hash
- url中有#
- 原理是onhashchange事件
- 仅 hash 符号之前的内容会被包含在请求中
- hash修改的url是同文档的url
- hash不会修改浏览器历史记录栈
- 生成二维码、微信分享页面的时候都会自动过滤掉#后面的参数 window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); }
history
- url中没有#,美观
- 原理是popstate事件,浏览历史(即history对象)出现变化时,就会触发popstate事件。history.pushState用于在浏览历史中添加历史记录,history.replaceState修改浏览历史中当前纪录,但是并不触发页面刷新
- 全路径内容会被包含在请求中
- history修改的url可以是同域的任意url
- history会修改浏览器历史记录栈
- 刷新出现404
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营