svelte - 表单提交后重定向用户

Question

我<input type="text" />在<form>.

/search?q=thingIWantToSearch因为它是一个搜索栏，所以用户应该在提交表单时被重定向到类似于 : 的路由。

目前我正在使用 alocation.href但我认为这不是一个好方法（或者是吗？）

这是我的代码：

<script>
    let inputValue = '';

    const handleSubmit = () => {
        // there should be some parsing before putting it in the url, but it's not the subject
        location.href = `/search?q=${inputValue}`;
    }
</script>

<form on:submit|preventDefault={handleSubmit}>
    <input type="text" bind:value={inputValue} />
    <button type="submit">submit</button>
</form>

那么如何在表单提交时正确重定向用户呢？

Answer 1

查看 Sappers goto 功能。它可能符合您的目的。

以下是如何使用您的代码。

<script>
  import { goto } from '@sapper/app';

  let inputValue = '';

  const handleSubmit = () => {
    // there should be some parsing before putting it in the url, but it's not the subject
    goto(`/search?q=${inputValue}`);
  };
</script>

<form on:submit|preventDefault="{handleSubmit}">
  <input type="text" bind:value="{inputValue}" />
  <button type="submit">submit</button>
</form>