如何使用 hash 向 url 添加查询参数？

Question

I have an URL string: http:/some.other.com/#/app/ .

I want to make it a string with a certain query param: http:/some.other.com/#/app/?my-param=whatever

I tried to do it like this:

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')

I expected to have following URL:

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

But the result is:

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

Maybe I missed something, but I guess a lot of apps such as angular, vue and I guess react use hash in the middle of the url string. So how to add query params properly in that case?

Answer 1

The comments are partially right, this information will not make it to the sever. However if you're just doing client side logic then nothing is stopping you. Below is an example of how to achieve what you're looking for.

 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)