參考資料
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>