使用vue和vue-router写一个登录和注册页面
时间: 2024-02-03 17:04:40 浏览: 43
好的,以下是一个简单的登录和注册页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login and Register Page</title>
<!-- 引入Vue和Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 使用Vue Router实现路由切换 -->
<router-link to="/login">Login</router-link>
<router-link to="/register">Register</router-link>
<router-view></router-view>
</div>
<!-- 定义登录和注册组件 -->
<template id="login">
<div>
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password"><br>
<button type="submit" @click.prevent="login">Login</button>
</form>
</div>
</template>
<template id="register">
<div>
<h2>Register</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password"><br>
<button type="submit" @click.prevent="register">Register</button>
</form>
</div>
</template>
<!-- 创建Vue实例和路由 -->
<script>
const Login = {
template: '#login',
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 处理登录逻辑
console.log('Login')
}
}
}
const Register = {
template: '#register',
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
// 处理注册逻辑
console.log('Register')
}
}
}
const router = new VueRouter({
routes: [{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
}
]
})
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
```
这个示例代码中,我们使用了Vue Router实现了路由切换,同时定义了两个组件:Login和Register。每个组件都有一个表单,用于输入用户名和密码,并且有一个按钮,分别处理登录和注册的逻辑。你可以在login和register方法中写上你的登录和注册逻辑。
相关推荐
![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)
![](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)