一文搞懂URL中的#、?、&
一、#
1、#的含义
- #代表网页一个位置,URL中#右边的字符就是该位置的标识符,如
http://www.example.com/index.html#print
就代表网页index.html
的print
位置。 - 浏览器读取这个URL后,会自动将print位置滚动至可视区域。为网页位置指定标识符,有两个方法。
- 使用锚点,比如
<a name="print"></a>
- 使用id属性,比如
<div id="print">
- 使用锚点,比如
2、#发出的请求对服务端无效
-
#是用来指导浏览器动作的,服务器不接收该字符及后面的值
-
如
http://www.example.com/index.html#print
实际上发出的浏览器请求是这样的-
GET /index.html HTTP/1.1 Host: www.example.com
-
3、改变#不触发网页重载
- 单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页
- 比如,从
http://www.example.com/index.html#location1
改成http://www.example.com/index.html#location2
,浏览器不会重新向服务器请求index.html。
4、改变#会改变浏览器的访问历史
-
每次改变#后面的部分,都会在
BOM
对象的history
中增加一条记录,可以在浏览器用后退按钮返回,也可以用history.back()
返回 -
BOM对象中的window.location.hash读写#值
5、onhashchange事件
- HTML 5新增的事件,其中仅IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
6、Vue中的#
-
Vue-Router
默认是hash
模式 -
使用Vue开发的单页面的应用,使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
-
可以修改
mode
为history
即可去除#
二、?
- 主要作用
- 连接参数:
/getUser?userId=123
- 清除缓存,以下两个URL返回的页面是一致的,但是第二个有?,说明不会调用缓存的内容,重新向服务器发送请求。这个在开发过程中,设置浏览器不缓存js文件特别有用。
http://www.example.com/index.html
http://www.example.com/index.html?ts1234434
- 连接参数:
三、&
- 不同参数连接符,如
/getUser?userId=123&corpId=2400
- 服务器解析后获取不同的参数