参考资料
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>
