admin管理员组

文章数量:1633790

文章目录

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

前言

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

要求：

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

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

一、页面的简单实现

1.登录页面

代码实现

<template>
<div >
    <div >
        <form action="">
          <h1>Login</h1>
          <div >
              <div >
                <label>用户名：</label><input type="text" name="username" v-model.trim="name" placeholder="请输入用户名">
                <!-- v-model把输入的值传输给name变量 -->
                <br/>
              </div>
              <div >
                <label>密码：</label><input type="password" name="password" v-model.trim="password" placeholder="请输入密码">
                <br/>
              </div>
              <div >
                <input @click="handlesave"  type="radio&#

本文标签： 页面跳转状态完整代码

版权声明：本文标题：用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729178180a1188982.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。