Javascript vuejs中的登录组件

我已经用下面的代码构建了一个登录组件，供用户登录后端is flask，并且正在使用flask\u登录

const LoginScreen = {

    template: `
                <div>
                    <h1>Sign In</h1>
                    <form id="loginform" class="pure-form">
                        <fieldset>
                            <input type="text" name="email" placeholder="email" v-model="logindetails.email"/>
                            <input type="password" name="password" placeholder="password" v-model="logindetails.password"/>
                            <button class="pure-button pure-button-primary" v-on:click="login">Login</button>
                        </fieldset>
                    </form>
                </div>
    `,

    data: function () {
        return {
                logindetails:{}
        }
    },

    methods: {
                login: function(){
                                    axios.post('/login/',
                                        this.logindetails,
                                           {
                                             headers: {
                                                        'Content-type': 'application/json',
                                                        'Accept': 'application/json',
                                                        'X-CSRF-TOKEN': document.querySelector('#csrftoken').getAttribute('content')
                                                       }
                                           }
                                          ).then(response => { this.logindetails = {};
                                                               this.$router.push({path: '/'});
                                                             }
                                                )
                                           .catch(function (error) {
                                                              console.log(error);
                                                            });
                                    }
            }
};

const LoginScreen={
模板：`
登录
登录
`,
数据：函数（）{
返回{
登录详细信息：{}
}
},
方法：{
登录：函数（）{
axios.post（“/login/”，
这是logindetails，
{
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
“X-CSRF-TOKEN”：document.querySelector（“#csrftoken”）.getAttribute（'content'）
}
}
)。然后（response=>{this.logindetails={}；
这是.$router.push（{path:'/'}）；
}
)
.catch（函数（错误）{
console.log（错误）；
});
}
}
};

它似乎工作正常（尽管有时它会毫无理由地要求我再次登录），但是组件正在将提交的表单详细信息放入url（）的查询字符串中

是否有人能告诉我我做错了什么，或者，如果我做得完全不正确，请告诉我正确登录的代码库/指南的方向

---

非常感谢。

关于

组件正在将提交的表单详细信息放入url的查询字符串中

，原因是单击按钮也会触发表单上的

提交

HTML表单向服务器提交表单值

但通常在Vue或React等JS框架中，表单值通过ajax提交，无需任何页面刷新。因此，使用
在这里没有多大价值

在这种情况下你可以做的两件事

删除
元素。它应该仍能正确工作
处理表单提交事件。
例如

关于
，组件将提交的表单详细信息放入url的查询字符串中
，原因是单击按钮也会触发表单上的
submit

HTML表单向服务器提交表单值

但通常在Vue或React等JS框架中，表单值通过ajax提交，无需任何页面刷新。因此，使用
在这里没有多大价值

在这种情况下你可以做的两件事

删除
元素。它应该仍能正确工作
处理表单提交事件。
例如

查看如何修改默认元素行为

在您的情况下，您可以：

<button @click.prevent="login">Login</button>

登录

或者在表单标签中（确保提交按钮为“提交”）：


查看以修改默认元素行为

在您的情况下，您可以：

<button @click.prevent="login">Login</button>

登录

或者在表单标签中（确保提交按钮为“提交”）：


多布勒，谢谢你的回答。谢谢你的回答Doblel。谢谢。
<form @submit.prevent="login">