如何在带有哈希的URL中添加查询参数？

Question

我有一个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')

我预期有以下URL：

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

但结果是：

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

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

- S Panfilov

---

实际上，你需要修改URL的hash。关于URL如何序列化，请参考规范。#符号及其后面的内容是hash，并追加到URL的末尾。 - undefined

这是因为哈希/片段总是出现在查询字符串之后：你想要实现的URL实际上是无效的。事实上，使用你提出的URL，服务器将永远无法读取查询字符串，因为它被视为哈希的一部分。你的JS代码实际上生成了正确的URL。 - undefined

Terry是对的。请查看维基百科上的URI §通用语法。 - undefined

你可能想要阅读哈希参数 vs URL 参数，何时使用哪个？ - undefined

如果他没有将请求发送到服务器，那就无所谓了。也许他正在使用哈希来绕过使用历史记录API，同时仍然使用单页应用程序。 - undefined

Answer 1

这些评论部分正确，这些信息不会传输到服务器。但是，如果你只是在客户端逻辑中操作，那么没有任何阻碍。以下是一个实现你所需功能的示例。

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)

- Philip Rollins