用Vue2写一个美观的用户登录页面myLogin.vue,登录用户名为:mk,密码为:123456,登陆成功后跳转到myFirst.vue
时间: 2024-10-14 19:02:36 浏览: 10
在Vue2中创建一个美观的用户登录页面(假设你已经安装了Vue Router),可以使用Bootstrap等UI库来美化界面。以下是一个基本的示例,包括`myLogin.vue`和`myFirst.vue`两个文件。首先,确保已安装Vue Bootstrap库,可通过`npm`或`yarn`进行安装:
```bash
npm install bootstrap-vue
# 或者
yarn add bootstrap-vue
```
然后,在`myLogin.vue`中创建登录页面:
```html
<template>
<div class="container">
<b-card title="用户登录" class="mb-3">
<b-form-group label="用户名" :label-cols="6">
<input v-model="username" type="text" placeholder="请输入用户名 mk">
</b-form-group>
<b-form-group label="密码" :label-cols="6">
<input v-model="password" type="password" placeholder="请输入密码 123456">
</b-form-group>
<button @click.prevent="submitForm" :disabled="!isValid" class="btn btn-primary mt-3">
登录
</button>
</b-card>
<transition name="fade" mode="out-in">
<router-view v-if="$route.meta.showOnSuccess"></router-view>
</transition>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
data() {
return {
username: '',
password: '',
isValid: false,
};
},
methods: {
submitForm() {
if (this.username === 'mk' && this.password === '123456') {
this.$router.replace("/myFirst"); // 登陆成功跳转
this.$emit('form-submitted', true); // 触发自定义事件通知组件状态变化
} else {
alert("用户名或密码错误");
}
},
},
computed: {
isValid() {
return this.username !== '' && this.password !== '';
},
},
};
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
```
在`main.js`或`App.vue`中配置路由:
```javascript
import VueRouter from 'vue-router';
import MyLogin from './components/myLogin.vue';
import MyFirst from './components/myFirst.vue';
const routes = [
{
path: '/login',
component: MyLogin,
meta: {
showOnSuccess: true, // 登录成功后显示此组件
},
},
{
path: '/myFirst',
component: MyFirst,
// 更改权限检查或其他条件在这里
},
];
const router = new VueRouter({
routes,
});
// 配置全局守卫以处理登录状态
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('isAuthenticated')) {
next('/login');
} else {
next();
}
});
new Vue({ router }).$mount('#app');
```
在这个例子中,当登录信息正确时,会触发`form-submitted`事件,你可以在`myFirst.vue`或者其他适当的地方监听这个事件并处理跳转。同时,我们还设置了一个全局的路由守卫,确保用户只有在登录后才能访问其他页面。
阅读全文