用vue和vue-router编写一个登录页面和注册页面,methods也请编写
时间: 2024-02-05 17:13:23 浏览: 27
以下是一个基本的登录页面和注册页面的 Vue 代码示例,使用了 Vue Router 进行路由管理:
```html
<!-- App.vue -->
<template>
<div id="app">
<!-- 路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from './components/Login';
import Register from './components/Register';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
],
});
export default {
router,
};
</script>
```
```html
<!-- Login.vue -->
<template>
<div>
<h1>登录页面</h1>
<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>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// 发送登录请求
},
},
};
</script>
```
```html
<!-- Register.vue -->
<template>
<div>
<h1>注册页面</h1>
<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>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
confirmPassword: '',
};
},
methods: {
register() {
// 发送注册请求
},
},
};
</script>
```
在这里,`Login` 组件和 `Register` 组件分别对应登录页面和注册页面,使用了表单和 `v-model` 实现了双向数据绑定。`methods` 中的 `login` 和 `register` 方法分别处理登录和注册请求。当用户点击登录或者注册按钮时,表单的 `submit` 事件会被触发,我们通过 `@submit.prevent` 阻止了表单的默认提交行为,从而可以在 `methods` 中手动处理登录或者注册逻辑。