Quiero crear una página de inicio de sesión que llame a la API de inicio de sesión de muestra ( https://reqres.in/ ).
Quiero que después de que el usuario inicie sesión, vaya a otra página y los usuarios permanezcan conectados si la página se actualiza, pero después de hacer clic en el botón de inicio de sesión, no va a otra página y solo se actualiza la página de inicio de sesión. y el almacenamiento local está vacío.
¡gracias por su ayuda!
este es mi formulario de inicio de sesión:
<template> <form> <label>Email:</label> <input required v-model="email" /> <label>Password:</label> <input type="password" required v-model="password" /> <button @click="login">LOGIN</button> </form> </template> <script> import axios from "axios"; export default { data() { return { email: "", password: "", }; }, methods: { async login() { let result = await axios.get( `https://reqres.in/api/users?email=${this.email}&password=${this.password}` ); if (result.status == 200 && result.data.length > 0) { localStorage.setItem("userInfo", JSON.stringify(result.data)); this.$router.push("/firstPage"); } console.log(result) }, }, }; </script>El concepto de preventDefault sirve para evitar el funcionamiento predeterminado del elemento relevante por parte del navegador en ese momento. Por ejemplo, cuando se hace clic en un elemento, su comportamiento predeterminado es redirigir a la dirección URL correspondiente. Usamos preventDefault para evitar este comportamiento.
El método event.stopPropagation() detiene el burbujeo de un evento en los elementos principales, evitando que se ejecuten los controladores de eventos principales.
La diferencia entre ellos es brevemente como sigue.
stopPropagation evita que el evento aumente en la cadena de eventos.
preventDefault evita la acción predeterminada del navegador en este evento.
So, you just need to use stopPropagation() method.Intente usar rutas con nombre: https://router.vuejs.org/guide/essentials/named-routes.html
Hay un ejemplo completo aquí: https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js
Cuando un <form> contiene un solo <button> , se trata como el botón de envío del formulario, lo que provoca el evento de submit , que vuelve a cargar la página.
Para resolver esto, puede invocar Event.preventDefault en el evento de submit del formulario con la directiva v-on:submit junto con el modificador de evento .prevent :
<form @submit.prevent> ⋮ </form>