图解登录页面跳转至首页

一、创建一个vue3项目，AboutView.vue找到文件

 将以下代码复制上去

<template>
 <div class="register">
    <div class="register-form">
      <h2 class="register-title">注册</h2>
      <div class="register-input">
        <input v-model="username" type="text" placeholder="请输入用户名" />
      </div>
      <div class="register-input">
        <input v-model="password" type="password" placeholder="请输入密码" />
      </div>
      <div class="register-input">
        <input v-model="confirmPassword" type="password" placeholder="请确认密码" />
      </div>
      <div class="register-actions">
        <button class="register-btn" v-if="step === 1" @click="nextStep">下一步</button>
        <button class="register-btn" v-if="step === 2" @click="finish">完成</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      step: 1,
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    nextStep() {
      // 验证用户名、密码和确认密码是否为空
      if (this.username.trim() === '' || this.password.trim() === '' || this.confirmPassword.trim() === '') {
        alert('用户名、密码和确认密码不能为空！');
        return;
      }
      // 验证密码是否相同
      if (this.password !== this.confirmPassword) {
        alert('两次输入的密码不一致！');
        return;
      }
      // 进入第二步
      this.step = 2;
    },
    finish() {
      // 保存用户信息
      const userInfo = {
        username: this.username,
        password: this.password
      };
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
      // 注册成功后跳转到首页
      this.$router.push('/');
    }
  }
}
</script>
<style scoped>
.register {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-form {
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.register-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.register-input {
  margin-bottom: 20px;
}
.register-input input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #ccc;
}
.register-input input:focus {
  outline: none;
  border-bottom: 2px solid #007aff;
}
.register-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007aff;
  color: #fff;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}
.register-btn:focus {
  outline: none;
}
@media screen and (max-width: 767px) {
  .register-form {
    max-width: 320px;
  }
  .register-title {
    font-size: 18px;
  }
  .register-input input {
    font-size: 14px;
  }
  .register-btn {
    font-size: 14px;
    padding: 8px 16px;
  }
}
</style>

运行结果