文章目录
前言
本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现,css还在努力学习中,所以界面做的很丑lol
要求:
1.三个页面,登录页面Login,注册页面Register,主页Home
2.用route路由实现不同页面逻辑跳转
3.登录状态
- 打开网页时,不论输入的路由是什么,先判断是否已是登录状态,如果用户为登录状态,则直接显示主页;否则强制显示登录页
- 如果用户未选保持登录状态,则要在关闭浏览器后,再重新访问页面时,为未登录状态
- 如果用户选择了保持登录状态,则在关闭浏览器后,再重新访问页面时,为已登录状态
- 退出登录后,更改状态为不保持登录状态
一、页面的简单实现
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