Estoy usando Nuxt y Vue y estoy tratando de enviar un formulario, redirigir al usuario a una nueva ruta que incluya los parámetros enviados, enviar una solicitud de API para obtener algunos datos y luego representarlos.

Lo logré simplemente configurando la acción del formulario en la nueva ruta y agregando manualmente todos los parámetros de URL a la solicitud de API.

Primero creo un formulario simple con la ruta/search.

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

Al enviar el formulario, el usuario abandona la página actual y es redirigido a la nueva página. La URL ahora se vería así:http://www.example.com/search?foobar=test. Ahora busco elfoobar parámetro mediante el usothis.$route.query.foobar y enviarlo a mi API.

Sin embargo, el problema en mi enfoque es que al enviar el formulario, el usuario abandona la página actual y se producirá una nueva carga de página. Esto no es lo que queremos al crear aplicaciones web progresivas.

Entonces, mi pregunta es ¿cómo puedo enviar un formulario en Nuxt / Vue y redirigirlo a una nueva ruta que incluya los parámetros enviados?