使用 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()
    //...
  }
}