用vue实现注册页面、登录页面、主页之间跳转并保持登录状态

最新推荐文章于 2024-09-18 09:27:00 发布

ঞৣ忘ོ忧༊°

最新推荐文章于 2024-09-18 09:27:00 发布

阅读量746

点赞数

文章标签： servlet java html

本文链接：https://blog.csdn.net/weixin_70032683/article/details/127165942

版权

本文介绍了如何使用Vue.js创建登录、注册和主页，并实现页面间跳转。通过localStorage来保持登录状态，当用户重新访问时，如果状态为true则直接进入主页。同时详细展示了各个页面的HTML和CSS代码，以及关键的Vue组件和路由配置。

摘要由CSDN通过智能技术生成

一、页面的简单实现
1.登录页面

代码实现

<template>
<div id="background">
<div class="container">
<form action="">
<h1>Login</h1>
<div class="form">
<div class="item">
<label>用户名：</label><input type="text" name="username" v-model.trim="name" placeholder="请输入用户名">

<br/>
</div>
<div class="item">
<label>密码：</label><input type="password" name="password" v-model.trim="password" placeholder="请输入密码">
<br/>
</div>
<div class="keep">
<input @click="handlesave" id="yes" type="radio" value="0" >
<label for="yes">保持登录状态</label>
</div>
</div>

</form>
<button type="submit" @click.prevent="handlelogin">登录 </button>

<button @click.prevent="handleregister">注册</button>
<router-view></router-view>
</div>
</div>
</template>
//css
<style scoped>
#background{
width: 100%;
height: 100%;
background: url("../assets/bg2.jpg");
background-size:100% 100%;
position: fixed;
top: 0;
left: 0;
}

.container{
width: 480px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background:#00000090;
text-align: center;
border-radius: 20px;
margin-top: 10px;
}
.container h1{
color: aliceblue;
margin-left: 20px;
}
.item {
color: white;
margin-left: 15%;
margin-top: 35px;
font-size: 20px;
text-align: left;
}
.item label{
float:left;
width: 5em;
margin-right: 1em;
text-align: right;
}
in