devopsapp/src/views/admin/TopNav.vue

<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#334157"
    text-color="#fff"
    active-text-color="#fff"
  >
    <el-button
      class="button_icon"
      :icon="collapsed ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
      @click="doToggle()"
    />
    <el-submenu index="2" class="submenu">
      <template slot="title">{{ user.username }}</template>
      <el-menu-item index="2-1" @click="backToHome">
        <i class="el-icon-s-home" />
        <span slot="title">回到前台</span>
      </el-menu-item>
      <el-menu-item index="2-3" @click.native="goToLogout">
        <i class="el-icon-close" />
        <span slot="title">登出</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { userMixin } from 'assets/js/mixin'
import { getAuthedUser } from '@/utils/auth'

export default {
  name: 'TopNav',
  mixins: [userMixin],
  data() {
    return {
      user: null,
      collapsed: false,
      imgshow: require('@/assets/img/logo.png'),
      imgsq: require('@/assets/img/logo.png')
    }
  },
  created() {
    this.user = getAuthedUser()
  },
  methods: {
    doToggle() {
      // 主要控制 collapsed 为 true 或 false
      this.collapsed = !this.collapsed
      this.$root.Bus.$emit('HandleSideMenu', this.collapsed)
    },
    backToHome() {
      const path = '/vod'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}

.submenu {
  float: right;
}

.button_icon {
  height: 60px;
  background-color: transparent;
  border: none;
}
</style>