上一篇简单编写了Header组件的框架：
Vue3.0 简单商城—Header组件的编写(1) – 每天进步一点点
Vue3.0 简单商城—路由和index页面编写 – 每天进步一点点
这一篇文章来美化一下Header组件。
1.Header组件
我们使用前面已经引入的ElementUI
我们修改Header组件，在其中加入”登录“ 和”退出“功能。
<template>
<div>
<el-row>
<el-col :span="8"></el-col>
<el-col :span="10">
<div class="grid-content ep-bg-purple" />
<span class="logo-text">水果商城</span>
</el-col>
<el-col :span="6"><div class="grid-content ep-bg-purple-light" />
<el-button type="primary">登录</el-button>
<el-button type="primary" plain>退出</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
data() {
// 这里存放数据
return {};
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
};
</script>
<style >
.logo-text{
color: #112eeb;
font-size: 20px;
font-weight:600
}
</style>
我们需要加入一些逻辑。
比如：
1.当打开界面的时候我们首先校验一下用户有没有登录，如果登录了，就不显示”登录“按钮，如果没有登录，就只显示”登录“按钮，不显示”退出按钮“。
2.如果用户点击登录，就弹出登录的对话框，进行登录操作（登录也是一个组件）。
3.校验用户是否登录过，可以暂时用本地存储，localstorgae。
修改完Header组件如下：
<template>
<div>
<el-row>
<el-col :span="8"></el-col>
<el-col :span="10">
<div class="grid-content ep-bg-purple" />
<span class="logo-text">水果商城</span>
</el-col>
<el-col :span="6"
><div class="grid-content ep-bg-purple-light" />
<el-button @click="Login" v-if="!isLogin" type="primary">登录</el-button>
<el-button @click="logout" v-else type="primary" plain>退出</el-button>
<span v-if="isLogin">欢迎您：{{user.username}}</span>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
isLogin: false, //是否登录的标志
user:{},//用户数据
};
},
computed: {},
// 方法集合
methods: {
//登录跳转
Login() {
this.$router.push("/login");
},
//登出方法
logout() {
console.log("用户登出");
console.log(localStorage.getItem("userToken"));
this.$router.push("/login").catch((err) => err);
localStorage.removeItem("userToken");
this.login = true;
console.log(localStorage.getItem("userToken"));
},
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
if (localStorage.getItem("userToken")) {
this.isLogin = true;
this.user = JSON.parse(localStorage.getItem("userToken"))
} else {
this.isLogin = false;
}
},
};
</script>
<style >
.logo-text {
color: #112eeb;
font-size: 20px;
font-weight: 600;
}
</style>
此处，如果用户没有登录的话点击登录就会跳转到登录界面，如果退出的话也会跳转到登录界面。
在mounted函数中监测有没有用户登录信息，如果有就显示用户信息，如果没有则展示默认登录状态。
2.编写登录组件Login.vue
这里为了示范，先不用表单逻辑，就简单使用input框
我们创建一个login.vue
参考代码如下：
<template>
<div>
<el-card class="box-card">
<el-row>
<h2>欢迎来到水果商城</h2>
</el-row>
<el-row>
用户名：
<el-input v-model="username" placeholder="请输入用户名"></el-input
></el-row>
<el-row>
密码：
<el-input
placeholder="请输入密码"
v-model="password"
show-password
></el-input>
</el-row>
<el-row>
<el-col :span="12">
<el-button type="primary" round @click="userLogin"
>登录</el-button
></el-col
>
<el-col :span="12"> <el-button round>注册</el-button></el-col>
</el-row>
</el-card>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
username: "",
password: "",
};
},
methods: {
//登录方法：
userLogin() {
if (this.acount == "") {
alert("用户名不能为空");
return;
} else if (this.password == "") {
alert("密码不能为空");
return;
} else {
//模拟向后台请求数据
alert("登录成功")
//使用localstorage存储
let userData = {
username: this.username,
password: this.password,
};
//如果localStorage监测到userToken就认为登录成功了
localStorage.setItem("userToken", JSON.stringify(userData)); //使用json，便于观察数据
//localStorage.setItem("userToken", userData);
console.log(userData)
this.$router.push("/home") //路由跳转
}
},
},
};
</script>
<style>
.box-card {
margin: 5% 25% 5% 25%;
width: 50%;
}
</style>
然后在路由中，添加登录组件的信息，让header组件可以跳转到路由组件中。
// 定义路由
const routes = [
{
path: '/',
name: 'index',
component: index,
},
{
path:'/login',
name:'login',
component:login,
}
];
这样便能实现简单的登录功能，效果图如下：
