Estou usando o Nuxt e o Vue e estou tentando enviar um formulário, redirecionar o usuário para uma nova rota, incluindo os parâmetros enviados, enviar uma solicitação de API para obter alguns dados e depois renderizá-los.

Consegui isso simplesmente definindo a ação do formulário para o novo caminho e adicionando manualmente todos os parâmetros de URL à solicitação da API.

Primeiro, crio um formulário simples com a rota/search.

<form action="/search">
  <input type="text" name="foobar">
  <button type="submit">Submit</button>
</form>

Ao enviar o formulário, o usuário sai da página atual e é redirecionado para a nova página. O URL agora ficaria assim:http://www.example.com/search?foobar=test. Agora eu pego ofoobar parâmetro usandothis.$route.query.foobar e envie para minha API.

No entanto, o problema em minha abordagem é que, ao enviar o formulário, o usuário sai da página atual e um novo carregamento de página ocorrerá. Não é isso que queremos ao criar aplicativos da web progressivos.

Portanto, minha pergunta é como posso enviar um formulário no Nuxt / Vue e redirecionar para uma nova rota, incluindo os parâmetros enviados?