详解获取url各个部分的方法

以这个网址为例子进行讲解

https://www.expamle.com/index.html#/myConcern?from=reduce&endTime=2023-12-02

window.location 对象具有以下属性：

window.location.href：获取或设置完整的 URL 地址。

https://www.expamle.com/index.html#/myConcern?from=reduce&endTime=2023-12-02

window.location.protocol：获取或设置 URL 的协议部分（例如，http:、https:）。

https:

window.location.host：获取或设置 URL 的主机部分（包括域名和端口号）。

www.expamle.com

window.location.hostname：获取或设置 URL 的主机名部分（不包括端口号）。

www.expamle.com

window.location.port：获取或设置 URL 的端口号部分。

‘’

window.location.pathname：获取或设置 URL 的路径部分。

‘/index.html’

window.location.search：获取或设置 URL 的查询字符串部分（以 ? 开头的参数部分）。
对于hash的就会取不到

‘’

window.location.hash：获取或设置 URL 的片段标识符部分（以 # 开头的锚点部分）。

#/myConcern?from=reduce&endTime=2023-12-02

除了上述属性，window.location 还有一些方法可以用于页面导航和重定向：

window.location.assign(url)：在当前窗口中加载指定的 URL。
window.location.replace(url)：使用指定的 URL 替换当前页面，不会生成历史记录。
window.location.reload()：重新加载当前页面。

那如果对于hash类型的url想要拿到到url后面的内容怎么办呢？
没有现成的办法，只能取window.location.hash后截取获得了

const data = window.location.hash.split('?')[1]

如果想要取得？后的参数的值

const params = new URLSearchParams(data)

URLSearchParams对象的用法

// 创建一个 URLSearchParams 对象，并传入查询字符串
const params = new URLSearchParams('?from=reduce&endTime=2023-12-02');

// 获取特定参数的值
const from = params.get('from'); // "reduce"
const endTime = params.get('endTime'); // "2023-12-02"

// 添加新的参数
params.append('newParam', 'value');
console.log(params.toString()); // "from=reduce&endTime=2023-12-02&newParam=value"

// 修改参数的值
params.set('from', 'update');
console.log(params.toString()); // "from=update&endTime=2023-12-02&newParam=value"

// 删除参数
params.delete('endTime');
console.log(params.toString()); // "from=update&newParam=value"