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

文章目录

• 前言
• 一、页面的简单实现
• • • 1.登录页面
    • 2.注册页面
    • 3.主页（显示个人信息）
• 二、逻辑实现
• • 1.localStorage的使用
  • 2.功能实现
  • • 登录
    • 注册
    • 主页
    • 路由配置文件
• 总结

---

前言

本文主要讲解用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="hand