URL
URL, Uniform Resource Location, 统一资源定位符;根据URL能够直接定位和访问到资源。
URL一般由以下部分进行组成:
protocol:[//[user:password@]host[:port]][/]path[?query][#fragment]
下面我们依次对上面的参数进行解释:
(1) protocol: 协议;也可以叫做scheme; 目前主要是用的有http(超文本传输协议), https(超文本传输协议), ftp(文件传输协议), file(本地文件协议)
(2) [user:password@]host: 主机名;是指存放资源的服务器的对外访问域名或者IP地址;user:password 是连接服务器的用户名和密码,不需要访问权限时可以省略
(3) port: 端口号;提供资源服务的端口;不提供的话会使用协议的默认端口,如http协议会使用80端口,https协议会使用443端口
(4) path:路径;用于定位资源的具体位置
(5) query: 查询: 用于给动态网页传递参数,多个参数用&隔开,每个参数的名称和值之间使用=对应;此参数可选
(6) fragment: 信息片段;用来标识次级资源;此参数可选;
fragment 特性的使用
单页面路由
query 会被网络请求带到服务器,而fragment不会被发送到服务器;fragment的改变不会触发浏览器刷新页面,但是会生成浏览历史
js提供了location.hash来操作当前fragment, 同时提供了Hashchange事件监听fragment的变化;利用此特性可以实现一个简单的前端路由。具体实现场景可参考vue-router hash模式。
锚点
fragment 会被浏览器根据文件媒体类型(MIME type)进行对应的处理;
当返回的文件类型为text/html时,使用fragment可以实现页面内定位;快速跳转到锚点位置。此处不再详细介绍,锚点是很常见的一种用法
不能被SEO
Google的搜索引擎会忽略掉#及后面的字符串;
可以在#后面紧跟一个!, 这样搜素迎请就会进行转换, 如: http://domain/index.html#!index 转换后就成为了 http://domain/index.html?_escaped_fragment_=index
参考: