表单提交后动态路由URL冗余，如何优化为干净的x/search/string格式？

问题出在表单里的input带有name="slug"属性——当表单以GET方式提交时，浏览器会自动把所有带name的表单字段拼接成查询参数追加到URL后面，所以哪怕你在action里已经指定了search/${slug}，最终还是会多出?slug=xxx的后缀。

直接按下面的步骤修改就能解决：

1. 移除input的name属性
   去掉input标签里的name="slug"，这样浏览器就不会自动添加查询参数了。

2. 确认路由结构正确
   你的+page.server.ts必须放在src/routes/search/[slug]/目录下，这样SvelteKit才能把URL里的search/xxx中的xxx解析成params.slug。

修改后的表单代码：

<script lang="ts">
    let slug = '';
</script>

<form action={`search/${slug}`} method="GET">
    <input bind:value={slug} type="text" />
    <button type="submit">搜索</button>
</form>

如果想避免用户提交空内容导致无效URL，可以加个简单的提交校验：

<script lang="ts">
    let slug = '';

    const handleSubmit = (e: SubmitEvent) => {
        if (!slug.trim()) {
            e.preventDefault();
            // 这里可以加个弹窗提示用户输入搜索内容
        }
    }
</script>

<form action={`search/${slug}`} method="GET" on:submit={handleSubmit}>
    <input bind:value={slug} type="text" placeholder="请输入搜索关键词" />
    <button type="submit">搜索</button>
</form>

修改后提交表单，URL就会变成你想要的x/search/你的搜索词，同时+page.server.ts里的API查询逻辑完全不受影响，依然能通过params.slug拿到搜索词。

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