vue登录注册页面代码

以下是一个简单的Vue登录注册页面的示例代码，包括了基本的表单验证和路由跳转功能：

HTML模板：

<div id="app">
  <router-link to="/login">登录</router-link>
  <router-link to="/register">注册</router-link>
  <router-view></router-view>
</div>

<template id="login-template">
  <div>
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username">
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password">
      </div>
      <div>
        <button type="submit">登录</button>
      </div>
    </form>
    <p v-if="errorMsg">{{ errorMsg }}</p>
  </div>
</template>

<template id="register-template">
  <div>
    <h2>注册</h2>
    <form @submit.prevent="register">
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username">
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password">
      </div>
      <div>
        <label for="confirm-password">确认密码：</label>
        <input type="password" id="confirm-password" v-model="confirmPassword">
      </div>
      <div>
        <button type="submit">注册</button>
      </div>
    </form>
    <p v-if="errorMsg">{{ errorMsg }}</p>
  </div>
</template>

JavaScript代码：

// 定义路由
const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register }
]

// 创建Vue实例
const app = new Vue({
  el: '#app',
  router: new VueRouter({ routes })
})

// 登录组件
const Login = {
  template: '#login-template',
  data() {
    return {
      username: '',
      password: '',
      errorMsg: ''
    }
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        this.errorMsg = '请输入用户名和密码'
        return
      }
      // 调用登录API
      api.login(this.username, this.password)
        .then(() => {
          // 登录成功，跳转到首页
          this.$router.push('/')
        })
        .catch(e => {
          this.errorMsg = e.message
        })
    }
  }
}

// 注册组件
const Register = {
  template: '#register-template',
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      errorMsg: ''
    }
  },
  methods: {
    register() {
      if (!this.username || !this.password || !this.confirmPassword) {
        this.errorMsg = '请输入用户名和密码'
        return
      }
      if (this.password !== this.confirmPassword) {
        this.errorMsg = '两次输入的密码不一致'
        return
      }
      // 调用注册API
      api.register(this.username, this.password)
        .then(() => {
          // 注册成功，跳转到登录页面
          this.$router.push('/login')
        })
        .catch(e => {
          this.errorMsg = e.message
        })
    }
  }
}

// 模拟API
const api = {
  login(username, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (username === 'admin' && password === '123456') {
          resolve()
        } else {
          reject(new Error('用户名或密码错误'))
        }
      }, 1000)
    })
  },
  register(username, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (username !== 'admin') {
          resolve()
        } else {
          reject(new Error('用户名已存在'))
        }
      }, 1000)
    })
  }
}

注意：以上代码仅供参考，具体实现方式可以根据需求进行调整。