用vue完成注册和登录页面
时间: 2023-10-25 22:11:27 浏览: 24
好的,下面是一个简单的例子:
首先,我们需要安装 `vue` 和 `vue-router`,可以使用以下命令来安装:
```
npm install vue vue-router --save
```
然后,我们创建两个组件:`Register.vue` 和 `Login.vue`。
**Register.vue**
```html
<template>
<div>
<h2>Register</h2>
<form @submit.prevent="register">
<label>
Email:
<input type="email" v-model="email">
</label>
<br>
<label>
Password:
<input type="password" v-model="password">
</label>
<br>
<button type="submit">Register</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
register() {
// 发送注册请求
console.log('Register:', this.email, this.password);
// 注册成功后跳转到登录页
this.$router.push('/login');
}
}
}
</script>
```
这里简单地使用了一个表单,用户输入邮箱和密码后,点击“Register”按钮会触发 `register` 方法。在该方法中,我们可以发送注册请求,并在注册成功后跳转到登录页面。
**Login.vue**
```html
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="login">
<label>
Email:
<input type="email" v-model="email">
</label>
<br>
<label>
Password:
<input type="password" v-model="password">
</label>
<br>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求
console.log('Login:', this.email, this.password);
// 登录成功后跳转到首页
this.$router.push('/');
}
}
}
</script>
```
登录页和注册页很相似,也是使用了一个表单,用户输入邮箱和密码后,点击“Login”按钮会触发 `login` 方法。在该方法中,我们可以发送登录请求,并在登录成功后跳转到首页。
最后,在 `main.js` 中配置路由:
```js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Register from './components/Register.vue'
import Login from './components/Login.vue'
Vue.use(VueRouter);
const routes = [
{ path: '/register', component: Register },
{ path: '/login', component: Login },
];
const router = new VueRouter({
routes
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
现在,我们就可以通过访问 `/register` 和 `/login` 来访问注册和登录页面了。