Vue JS：注销后执行 router.push() 方法时，表单不会被清除

问题描述

我使用 Flask 作为后端，使用 Vue JS 作为开发前端。用于状态存储的 Vuex。

在 logout() 中，我通过 store.dispatch('/logout') 从 localStorage 清除身份验证令牌，然后使用 router.push('/login') strong> 导航到 Login.vue。我发现之前输入的表单详细信息没有被清除。当执行 logout() 时，它会导航到 Login.vue 并显示“您已成功注销”的提示信息。

以下是相同的代码片段：

  logout() {
  axios.get(`${this.host}:5000/logout`)
    .then((res) => {
      this.$store.dispatch('logout')
        .then(() => {
          this.$router.push('/login');
        });
      this.flashMessage.success({
        message: res.data.msg,time: 5000,flashMessageStyle: {
          backgroundColor: 'linear-gradient(#e66465,#9198e5)',},});
    })
    .catch((error) => {
      this.flashMessage.error({
        message: error.toString(),});
    });
}

logout() 是用 App.vue 编写的。这里的 router 是 vue-router 的一个实例。 为了避免表单数据未被清除的问题，我在上面的代码中使用了 router.go() 而不是 router.push()。但是由于这种实现，当重新加载（因为 router.go()）覆盖了我不想要的 flash 消息的显示时，flash 消息没有被显示。

如果可以在注销后删除表单数据而不会陷入不显示闪存消息的麻烦，请告诉我。

解决方法

不确定您是如何实现 Login.vue 的，但这里有一个我已经实现的 Login.vue，它可以工作。要点之一应该是我的表单模型数据值被初始化为空字符串。

<template>
    <div id="login">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-md-offset-3 col-md-2 align-right">User Name</label>
                <div class="col-md-3">
                    <input type="input" ref="username" class="form-control" id="username" v-model="username">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-md-offset-3 col-md-2 align-right">Password</label>
                <div class="col-md-3">
                    <input type="password" class="form-control" id="password" v-model="password" v-on:keyup.enter="login">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-5 col-md-4">
                    <button type="button" class="btn btn-default"
                        v-on:click="login">Login</button>
                    <span class="error-msg" v-if="errorMsg">{{ errorMsg }}</span>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    import { loginUrl,axios,processAjaxLoginError } from '../globalvars.js'

    export default {
        name: 'Login',data() {
            return {
                username: '',password: '',errorMsg: ''
            }
        },methods: {
            login() {
                axios.post(loginUrl,{
                    username: this.username,password: this.password
                })
                .then(response => {
                    // Commit the token to the store
                    this.$store.commit('updateToken',{ token: response.data.message });

                    // Clear error message
                    this.errorMsg = '';
                    
                    // Redirect to customer index view
                    this.$router.push("/customers")
                })
                .catch(error => {
                    this.errorMsg = processAjaxLoginError(error);
                })
            }
        },computed: {
            token() {
                return this.$store.state.token;
            }
        },mounted() {
            this.$refs.username.focus();
        }
    }
</script>