如何使用哈希向 url 添加查询参数？答案

【问题标题】：How to add a query param to the url with hash?如何使用哈希向 url 添加查询参数？
【发布时间】：2020-04-10 13:17:40
【问题描述】：

我有一个 URL 字符串：http:/some.other.com/#/app/。

我想把它变成一个带有特定查询参数的字符串：http:/some.other.com/#/app/?my-param=whatever

我试着这样做：

function addQueryParam(url, key, value) {
  const newUrl = new URL(url)
  newUrl.searchParams.set(key, value)
  return newUrl.toString()
}

addQueryParam('http:/some.other.com/#/app/', 'my-param', 'whatever')

我希望有以下网址：

http:/some.other.com/#/app/?my-param=whatever

但结果是：

http://some.other.com/?my-param=whatever#/app/

也许我错过了一些东西，但我猜很多应用程序，例如 angular、vue 和我猜 react 在 url 字符串的中间使用哈希。那么在这种情况下如何正确添加查询参数呢？

【问题讨论】：

其实需要修改URL的hash...关于URL如何序列化，见the spec。 # 和之后的所有内容都是哈希，并附加到 URL 的末尾。
那是因为hash/fragment总是在查询字符串之后：你想要达到的URL实际上是无效的。事实上，使用您建议的 URL，服务器将永远无法读取查询字符串，因为它被视为散列的一部分。您的 JS 代码实际上正在生成 正确的 URL。
特里是对的。看看URI § Generic Syntax on the Wikipedia
您可能想阅读Hash params vs url params, when to use which?
如果他不向服务器发送请求也没关系。也许他在使用 SPA 的同时使用哈希来解决使用历史 API 的问题。

标签： javascript url

【解决方案1】：

cmets 部分正确，此信息不会发送到服务器。但是，如果您只是在做客户端逻辑，那么没有什么能阻止您。下面是一个示例，说明如何实现您的目标。

function addHashQueryParam(url, key, value) {
  const existing = (url.lastIndexOf('?') > url.lastIndexOf('#')) ?
    url.substr(url.lastIndexOf('?') + 1) : '';
    
  const query = new URLSearchParams(existing);
  query.set(key, value)
  return `${url.replace(`?${existing}`, '')}?${query.toString()}`;
}

let url = 'http:/some.other.com/#/app/';

url = addHashQueryParam(url, 'my-param', 'whatever');
console.log(url)

url = addHashQueryParam(url, 'my-second-param', 'whomever');
console.log(url)

【讨论】：