URL概述

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

参考: 

URI's fragment - 简书 (jianshu.com)

常见URL协议_url 协议_风神修罗使的博客-CSDN博客