前端小tips
vue的hash和history模式
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
前端小tips
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
vue的hash和history模式
vue的hash和history模式
前端小tips
关注
发布于 2021-12-10 10:49:57
532
0
发布于 2021-12-10 10:49:57
举报
文章被收录于专栏:
前端文章小tips
路由模块的本质就是建立起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
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
php
编程算法
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
php
编程算法
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
文章
0
获赞
0
目录
背景知识
hash
history
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐