使用 vue.js 按下提交后将用户重定向到不同的页面

Question

我试图在用户输入正确的用户信息后将用户重定向到不同的页面，然后使用（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');


                }
            }
        }
    }

});

Answer 1

问题在于<form id="login" method="post">

该表单没有定义动作，因此它使浏览器刷新。

您需要通过表单元素阻止默认操作

<form v-on:submit.prevent>

或通过您的 onsubmit 处理程序：

methods: {
  onSubmit: function (e) {
    e.preventDefault()
    //...
  }
}