vue3创建的项目：用户登录功能路由跳转后又跳回了登录页，并且路径多个get请求问题

liugaoming / 2024-07-05 / 原文

前提：
我使用element-plus组件后，又在网上找的普通的form表单的样式，一通cv后。。。。代码如下：

用户名 ------------------------->看这里我在el-form-item中用了input，原因是：我cv的代码他有原来的样式，很多，本来想懒得改，直接**把el-input改成input**了---------------- <**input** v-model="loginForm.username" type="text" name="name" id="name" @focus="usernameOnFocus" @blur="usernameOnBlur" > .................下面差不多，都写了input **先说解决方案：** **1，在el-form中添加@submit.prevent="submitForm"** submitForm是我的提交表单的请求

................. **2，添加event参数** const submitForm = (**event**) => { **3， event.preventDefault(); // 阻止表单默认提交行为** loginFormRef.value.validate((valid) => { if (valid) { request({ url: '/login', method: 'POST', data: loginForm }).then(res => { if (200 == res.data.errorCode) { sessionStorage.setItem('loginUser', JSON.stringify(loginForm)) //登录成功跳转到HomePage页面 router.push('/') ElMessage({ message: '登录成功！', type: 'success', }) 。。。。。。。。。。。。。。。。。。。 }

总结：
如果用了element-form的话，他会把原来的form表单进行自动阻止表单默认提交行为，但是：你如果里头不用el-input的话他会在你自己发出请求后【axios】，再次给你发一个默认的get请求。