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>