vite-admin-template/src/layout/top.vue

<template>
      <el-row class='flex flex-align-center flex-justify-between top '>
        <el-col  :span='12'>
          <div class='flex flex-justify-start flex-align-center light-green-bg'>
            <el-icon :size="20">
              <Filter />
            </el-icon>
            <el-breadcrumb class='ml-20' separator="/">
              <el-breadcrumb-item v-for='item in nav.menus' :key='item.id'>
                <a :href="item.path">{{ item.name }}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </el-col>
        <el-col :span='12'>
          <div class='flex-child-average flex-justify-center flex padding-right  light-green-bg'>
            <el-button @click='nav.cleanMenu()'>清除缓存</el-button>
          </div>
        </el-col>
      </el-row>
</template>

<script>
import navStore from '../store/nav.js'

export default {
  name: 'top',
  setup () {
    const nav = navStore()
    return { nav }
  },
  created () {
    this.nav.$subscribe((res) => {
      console.log(res.events.target)
    })
  }
}
</script>

<style lang='scss' scoped>
.top{
  height: 60px;
  z-index: 1;
  background-color: white;
  top: 0;
  left: 300px;
  right: 0;
  position: fixed;
  border-bottom: whitesmoke solid 1px;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
}
</style>