用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】

---

前言

本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现，css还在努力学习中，所以界面做的很丑lol

要求：

1.三个页面，登录页面Login，注册页面Register，主页Home
2.用route路由实现不同页面逻辑跳转
3.登录状态

1. 打开网页时，不论输入的路由是什么，先判断是否已是登录状态，如果用户为登录状态，则直接显示主页；否则强制显示登录页
2. 如果用户未选保持登录状态，则要在关闭浏览器后，再重新访问页面时，为未登录状态
3. 如果用户选择了保持登录状态，则在关闭浏览器后，再重新访问页面时，为已登录状态
4. 退出登录后，更改状态为不保持登录状态

一、页面的简单实现

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="请输入用户名">
                <!-- v-model把输入的值传输给name变量 -->
                <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>
              <!-- v-on点击按钮触发handlelogin方法 -->
              <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;
}
input{
   
  margin-left: -5px;
  padding: 4px