我想創建一個呼叫示例登錄 API ( https://reqres.in/ ) 的登錄頁面。
我想在用戶登錄后轉到另一個頁面，如果頁面重繪 ，用戶保持登錄狀態，但是在我單擊登錄按鈕后，它不會轉到另一個頁面，只是登錄頁面重繪 ！并且本地存盤是空的。
謝謝您的幫助！
這是我的登錄表單：
<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>
uj5u.com熱心網友回復：
當 a<form>包含單個<button>時，它被視為表單的提交按鈕，引發submit事件，重新加載頁面。
為了解決這個問題，您可以使用指令和事件修飾符Event.preventDefault呼叫表單的submit-event ：v-on:submit.prevent
<form @submit.prevent>
?
</form>
演示
uj5u.com熱心網友回復：
嘗試使用命名路由：https ://router.vuejs.org/guide/essentials/named-routes.html
這里有一個完整的例子：https ://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496344.html
標籤：javascript 形式 Vue.js 本地存储 Vue路由器