用vue3写一个简单的登录注册,要告诉我使用了哪些插件
时间: 2023-11-22 18:57:03 浏览: 30
好的,下面是一个用Vue3实现的简单的登录注册页面,使用了Vue Router和Axios插件:
```vue
<template>
<div>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import axios from 'axios';
// 登录页面组件
const LoginComponent = defineComponent({
data() {
return {
username: '',
password: '',
error: '',
};
},
methods: {
handleLogin() {
// 发送登录请求
axios.post('/api/login', {
username: this.username,
password: this.password,
})
.then(() => {
// 登录成功,跳转到首页
this.$router.push('/');
})
.catch((error) => {
// 登录失败,显示错误信息
this.error = error.response.data.message;
});
},
},
template: `
<div>
<h1>登录</h1>
<form @submit.prevent="handleLogin">
<div>
<label for="username">用户名:</label>
<input type="text" v-model="username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" v-model="password" required>
</div>
<div v-if="error" style="color: red;">{{ error }}</div>
<button type="submit">登录</button>
</form>
</div>
`,
});
// 注册页面组件
const RegisterComponent = defineComponent({
data() {
return {
username: '',
password: '',
confirmPassword: '',
error: '',
};
},
methods: {
handleRegister() {
// 发送注册请求
axios.post('/api/register', {
username: this.username,
password: this.password,
})
.then(() => {
// 注册成功,跳转到登录页面
this.$router.push('/login');
})
.catch((error) => {
// 注册失败,显示错误信息
this.error = error.response.data.message;
});
},
},
template: `
<div>
<h1>注册</h1>
<form @submit.prevent="handleRegister">
<div>
<label for="username">用户名:</label>
<input type="text" v-model="username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" v-model="password" required>
</div>
<div>
<label for="confirmPassword">确认密码:</label>
<input type="password" v-model="confirmPassword" required>
</div>
<div v-if="error" style="color: red;">{{ error }}</div>
<button type="submit">注册</button>
</form>
</div>
`,
});
// 创建路由实例
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/login', component: LoginComponent },
{ path: '/register', component: RegisterComponent },
],
});
export default defineComponent({
router,
});
</script>
```
其中,使用了Vue Router插件来实现路由功能,Axios插件来发送HTTP请求。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)