MyHeader.vue

<template>
	<div class="layout-header-container d-flex justify-content-between align-items-center p-3">
		<!-- 左侧 logo 和 标题区域 -->
		<div class="layout-header-left d-flex align-items-center user-select-none">
			<!-- logo -->
			<img class="layout-header-left-img" src="../../assets/kwan.png" alt="" />
			<!-- 标题 -->
			<h4 class="layout-header-left-title ml-3">kwan的解忧杂货铺</h4>
		</div>
		<el-row>
			<el-col :inline="true" :span="24">
				<el-button class="el-button-header" type="success" round @click="myHome">我的主页</el-button>
				<el-button class="el-button-header" type="primary" round @click="logout">退出登录</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
    name: 'MyHeader',
    methods: {
        logout() {
            // 1. 清空 token
            localStorage.removeItem('token')
            // 2. 跳转到登录页面
            this.$router.push('/login')
        },
        myHome() {
            // 新页面打开
            window.open('http://qinyingjie.top/')
            // 当前页面打开
            // window.location.href = "http://qinyingjie.top/";
        },
    },
}
</script>

<style lang="less" scoped>
.layout-header-container {
	height: 60px;
	border-bottom: 1px solid #eaeaea;
}

.layout-header-left-img {
	height: 50px;
}
</style>