AppHeader.vue

<template>
  <div class="h-6" />
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >

    <el-menu-item index="1">Main</el-menu-item>
    <el-menu-item index="2">Wish List</el-menu-item>
    <el-menu-item index="3">Flight Ticket</el-menu-item>
    <el-menu-item index="4" class="dock-right" @click="hanldeLogOut()">Log Out</el-menu-item>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapGetters } from "vuex";

export default defineComponent({
  data() {
    return {};
  },
  methods: {
    ...mapActions("auth", {
      logOut: "logOutApi",
    }),
    hanldeLogOut() {
      this.logOut()
      document.cookie = 'userId=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
      this.$router.push("/");
    }
  }
})

</script>

<style scoped>
.el-menu-demo > .el-menu-item.dock-right {
  margin-left: auto
}
</style>