如何把登录和注册vue组件结合起来,在一个总页面中显示两个的按钮,点开后是对应的登录或者注册页面,代码实现
时间: 2024-03-14 11:44:22 浏览: 20
可以通过 Vue Router 实现将登录和注册页面组合在一起,并且在一个总页面中显示两个按钮。以下是一个简单的实现方式:
1. 首先,创建一个名为 `Login` 的组件和一个名为 `Register` 的组件,分别用于渲染登录和注册页面。
2. 使用 Vue Router 定义两个路由,一个是 `/login`,另一个是 `/register`,并将它们分别映射到 `Login` 和 `Register` 组件。
3. 在总页面中,使用 `router-link` 组件创建两个链接,分别指向 `/login` 和 `/register`。
4. 在总页面中,使用 `router-view` 组件来渲染 `Login` 和 `Register` 组件。
以下是示例代码:
```html
<!-- App.vue -->
<template>
<div>
<div>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
import Login from './Login.vue'
import Register from './Register.vue'
export default {
components: {
Login,
Register
}
}
</script>
```
```javascript
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './Login.vue'
import Register from './Register.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
}
]
})
```
这样,当用户点击登录或注册按钮时,就会跳转到对应的页面,而不需要重新加载整个页面。