vue用户登录注册案例
时间: 2023-07-22 10:15:06 浏览: 47
好的,下面是一个基于Vue的用户登录注册案例:
首先,在项目中安装Vue和Vue Router:
```
npm install vue vue-router --save
```
其次,创建两个组件:Login.vue和Register.vue,分别对应登录和注册页面。
Login.vue:
```
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" v-model="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" v-model="password" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求
}
}
}
</script>
```
Register.vue:
```
<template>
<div>
<h2>Register</h2>
<form @submit.prevent="register">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" v-model="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" v-model="password" required>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
register() {
// 发送注册请求
}
}
}
</script>
```
接着,在main.js中引入和配置Vue Router:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import Register from './components/Register.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
const router = new VueRouter({
routes
})
new Vue({
router
}).$mount('#app')
```
最后,在App.vue中添加导航栏:
```
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/login" class="nav-link">Login</router-link>
</li>
<li class="nav-item">
<router-link to="/register" class="nav-link">Register</router-link>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
```
现在,我们就完成了一个简单的用户登录注册的Vue案例。当用户点击导航栏的Login或Register时,会分别跳转到Login和Register组件。在组件中,我们可以发送登录和注册请求。