点击按钮打开带Query参数的HTML文件时404错误的解决方法

我有两个HTML文件：index.html和search.html。想要通过点击按钮打开search.html，并在URL中传递查询参数。我写了如下代码：

const params = new URLSearchParams({
        sol: something,
        art: art,
        querytext: getStartedText
    }).toString();
window.location.href = "search.html/query?" + params

此时打开的URL为：

file:///Users/someone/Desktop/someProject/search.html/query?sol=Select+SME+Area&art=Select+Artifact+Types&querytext=

但出现404错误，提示文件无法找到。如果仅使用以下代码，就能正常打开search.html页面：

window.location.href = "search.html"

请问该如何修复此问题？

错误原因 #

你的URL格式写错了：search.html/query? 会让浏览器把search.html当成一个目录，去寻找目录下名为query的文件，而实际上search.html是一个独立文件，不存在对应的query文件，所以触发404。

正确写法 #

把URL里的/query去掉，直接将查询参数拼在search.html后面，用?开头即可：

const params = new URLSearchParams({
        sol: something,
        art: art,
        querytext: getStartedText
    }).toString();
window.location.href = "search.html?" + params

修改后生成的URL会是：

file:///Users/someone/Desktop/someProject/search.html?sol=Select+SME+Area&art=Select+Artifact+Types&querytext=

这样浏览器就能正确定位到search.html文件，同时查询参数也会被正确传递。

补充：在search.html中获取参数 #

如果需要在search.html中读取传递的参数，可以用以下代码：

const searchParams = new URLSearchParams(window.location.search);
const sol = searchParams.get('sol');
const art = searchParams.get('art');
const querytext = searchParams.get('querytext');

内容的提问来源于stack exchange，提问作者Alwaysblue