我试图在用户输入正确的用户信息后将用户重定向到不同的页面,然后使用 (window.location.href) 按提交按钮进行重定向,但页面在提交表单后不断重新加载
<form id="login" method="post">
<h1>Login students</h1>
<label for ="username">username:</label>
<input required type="username" id="username" v-model="username">
<br><br>
<label for="password">password: </label>
<input required type="password" id="password" v-model='password'>
<br><br>
<button v-on:click='onSubmit'>submit</button>
</form>
var loginApp = new Vue({
el: '#login',
data: {
username: '',
password: '',
},
methods: {
onSubmit: function () {
// check if the email already exists
var users = '';
var newUser = this.username;
var passcheck = this.password;
if (localStorage.getItem('users')) { // 'users' is an array of objects
users = JSON.parse(localStorage.getItem('users'));
}
if (users) {
if (users.some(function (user) {
return user.username === newUser & user.password === passcheck
})) {
//alert('Welcome back-' + newUser);
//window.location.href = '<index.html>' + '' + newUser;
window.location.href = "index.html";
} else {
alert('Incorrect username or password');
}
}
}
}
});
最佳答案
问题在于
<form id="login" method="post">
表单没有定义操作,因此它会使浏览器刷新。
您需要通过表单元素来防止默认操作
<form v-on:submit.prevent>
或通过您的 onsubmit 处理程序:
methods: {
onSubmit: function (e) {
e.preventDefault()
//...
}
}
关于javascript - 使用 vue.js 按提交后将用户重定向到不同页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58673043/