参考资料
Vue3.0官方文档:https://cn.vuejs.org/
Element Plus文档:https://element-plus.gitee.io/zh-CN/
记录登陆的状态
如果是登录状态 就跳转到首页
如果不是登录状态 就展示登录注册的界面
首先
在views文件夹底下新建一个登录的组件login.vue
打开router/index.js
登录界面的路由进行配置
//登录界面
{
path: '/login',
name: 'login',
component: () => import('../views/pages/login.vue'),
},
编写登录界面的代码
<template>
<div class="login_wrap">
<div class="form_wrap">
<el-form
ref="formRef"
:model="loginData"
label-width="100px"
class="demo-dynamic"
>
<el-form-item
prop="username"
label="用户名"
:rules="[
{
required: true,
message: '此项为必填项',
trigger: 'blur',
},
]"
>
<el-input v-model="loginData.username" />
</el-form-item>
<el-form-item
prop="password"
label="密码"
:rules="[
{
required: true,
message: '此项为必填项',
trigger: 'blur',
},
]"
>
<el-input type="password" v-model="loginData.password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(formRef)"
>登录</el-button
>
<!-- <el-button @click="addDomain">New domain</el-button>
<el-button @click="resetForm(formRef)">Reset</el-button> -->
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "login",
setup() {
const data = reactive({
loginData: {
username: "",
password: "",
},
});
return {
...toRefs(data),
};
},
};
</script>
<style scoped>
.login_wrap {
width: 100%;
height: 100vh;
background: #2d3761;
position: relative;
}
.form_wrap {
position: fixed;
top: 50%;
transform: translate(130%, -50%);
background: #fff;
padding: 30px 50px;
border-radius: 5px;
}
</style>