在vue项目中写出一个用户登录页面
时间: 2024-01-24 16:01:48 浏览: 24
好的,我可以为您提供示例代码。在Vue项目中,可以通过vue-router实现页面路由跳转和页面组件的切换。以下是一个简单的用户登录页面示例:
1. 安装vue-router
```bash
npm install vue-router --save
```
2. 在main.js中注册vue-router
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Login from './components/Login.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/login', component: Login }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
3. 创建Login组件
```vue
<template>
<div>
<h2>用户登录</h2>
<form>
<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="button" @click="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 处理登录逻辑
}
}
}
</script>
```
在这个示例中,我们创建了一个Login组件,包含了一个简单的表单,用户可以输入用户名和密码。当用户点击“登录”按钮时,我们可以在login方法中处理登录逻辑。
当用户访问/login路由时,会展示Login组件。您可以在router配置中添加更多的路由,根据需要展示不同的页面组件。