一文搞懂URL中的#、？、&

最新推荐文章于 2023-01-18 22:30:24 发布

Mr-tao

最新推荐文章于 2023-01-18 22:30:24 发布

阅读量3.6k

点赞数 3

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/qq_31441667/article/details/108340822

版权

0 篇文章 0 订阅

订阅专栏

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、改变#会改变浏览器的访问历史

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中的#

主要作用
- 连接参数： /getUser?userId=123
- 清除缓存，以下两个URL返回的页面是一致的，但是第二个有?，说明不会调用缓存的内容，重新向服务器发送请求。这个在开发过程中，设置浏览器不缓存js文件特别有用。
  - http://www.example.com/index.html
  - http://www.example.com/index.html?ts1234434

关注