vue3写一个登录注册

Vue3是Vue.js的最新版本，它带来了很多新的特性和优化，使得开发更加便捷。下面是一个简单的登录注册示例：

1. 创建一个Vue3应用

首先，需要创建一个新的Vue3应用，可以使用Vue CLI来快速创建。

vue create login-demo

2. 创建登录和注册组件

在src/components目录下创建Login.vue和Register.vue组件。

Login.vue：

<template>
  <div>
    <h2>登录</h2>
    <form>
      <div>
        <label>用户名:</label>
        <input type="text" v-model="username" />
      </div>
      <div>
        <label>密码:</label>
        <input type="password" v-model="password" />
      </div>
      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      // TODO: 发送登录请求
    },
  },
}
</script>

Register.vue：

<template>
  <div>
    <h2>注册</h2>
    <form>
      <div>
        <label>用户名:</label>
        <input type="text" v-model="username" />
      </div>
      <div>
        <label>密码:</label>
        <input type="password" v-model="password" />
      </div>
      <div>
        <label>确认密码:</label>
        <input type="password" v-model="confirmPassword" />
      </div>
      <button type="submit" @click.prevent="register">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
    }
  },
  methods: {
    register() {
      // TODO: 发送注册请求
    },
  },
}
</script>

3. 创建路由

在src/router/index.js中创建路由，使得登录和注册组件可以通过路由进行访问。

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

4. 在App.vue中使用路由

在App.vue中使用router-view组件来渲染路由。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

5. 完成登录和注册功能

在Login.vue和Register.vue组件中，通过发送HTTP请求来完成登录和注册功能。可以使用axios库来发送请求。

import axios from 'axios'

export default {
  // ...
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password,
      })
      .then(response => {
        // 登录成功
      })
      .catch(error => {
        // 登录失败
      })
    },
    register() {
      axios.post('/api/register', {
        username: this.username,
        password: this.password,
        confirmPassword: this.confirmPassword,
      })
      .then(response => {
        // 注册成功
      })
      .catch(error => {
        // 注册失败
      })
    },
  },
}

这样，一个简单的登录注册功能就完成了。当用户访问/login时，会显示Login.vue组件，访问/register时，会显示Register.vue组件。在组件中，用户可以输入用户名和密码，然后通过发送HTTP请求来完成登录或注册。