1.页面搭建<script setup>import { ref } from 'vue'//调用路由进行跳转3import {useRouter} from 'vue-router'const router = useRouter()import useUserInfoStore from '@/stores/userInfo.js'const userInfoStore = useUserInfoStore();const userInfo = ref({...userInfoStore.info})//定义数据模型const passwordData = ref({username:'',old_pwd:'',new_pwd:'',re_pwd:''})//校验密码的函数const checkRePassword = (rule, value, callback) => {if (value === '') {callback(new Error('请再次确认密码')) } else if (value !== passwordData.value.new_pwd) {callback(new Error('请确保两次输入的密码一样')) } else {callback() }}//定义表单校验规则const rules = {old_pwd: [ { required: true, message: '请输入原密码', trigger: 'blur' }, { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' } ] ,new_pwd: [ { required: true, message: '请输入新密码', trigger: 'blur' }, { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' } ],re_pwd: [ { validator: checkRePassword, trigger: 'blur' } ]}import {useTokenStore} from '@/stores/token.js'const tokenStore = useTokenStore();//修改密码import {userResetPasswordService} from '@/api/user.js'import {ElMessage} from 'element-plus'const updateUserPassword = async ()=>{//调用接口let result = await userResetPasswordService(passwordData.value);//退出登录//1.清空pinia中存储的token以及个人信息tokenStore.removeToken()//2.跳转到登录页面router.push('/login')ElMessage({type: 'success',message: '修改密码成功', })}</script><template><el-card class="page-container"><template #header><div class="header"><span>重置密码</span></div></template><el-row><el-col :span="12"><el-form :model="passwordData" :rules="rules" label-width="100px" size="large"><el-form-item label="原密码" prop="old_pwd" ><el-input v-model="passwordData.old_pwd" type="password"></el-input></el-form-item><el-form-item label="新密码" prop="new_pwd"><el-input v-model="passwordData.new_pwd" type="password"></el-input></el-form-item><el-form-item label="确认密码" prop="re_pwd"><el-input v-model="passwordData.re_pwd" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="updateUserPassword">提交修改</el-button></el-form-item></el-form></el-col></el-row></el-card></template>2.添加接口函数export const userResetPasswordService = (passwordData)=>{return request.patch('/user/updatePwd',passwordData) }