xiaodou-ai-admin/src/layout/navbar.vue

<template>
  <a-layout-header class="header">
      <a-row style="width: 100%;"  >
        <a-col :span="3" >
          <div class="logo" >
            <img :src="logoPng" alt="">
          </div>
        </a-col>
        <a-col :span="19" >
        <a-menu
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
          v-model:selectedKeys="selectedKeys"
      >
          <a-menu-item
            v-for="route in appRouter.$state.router.navbar.route"
            :key="route.path"
            @click="changeRouter(route.path)"
          >
            {{route.name}}
          </a-menu-item>
          </a-menu>
        </a-col>
        <a-col :span="1" >
          <user />
        </a-col>
      </a-row>

  </a-layout-header>
</template>

<script lang="ts" setup >
import { computed, onMounted, ref } from 'vue'
import { useAppRouter } from '@/store/router'
import user from './user.vue'
import { useRouter, useRoute } from 'vue-router'
import { routes } from '@/router/index'

const logoPng = require('@/assets/logo.png')

const router = useRouter()

const route = useRoute()

const appRouter = useAppRouter()

const selectedKeys = ref<string[]>()

const changeRouter = (path: string) => {
  selectedKeys.value = [path]
  appRouter.changeNavbar(path, '')
}

const hasCurrentRourte = (children: ROUTER.RoutesProps[]): boolean => {
  let r = false
  children.forEach(item => {
    if (item.path === route.path) {
      r = true
    }

    if (item.children && item.children.length) {
      item.children.forEach(_ => {
        if (_.path === route.path) {
          r = true
        }
      })
    }
  })

  return r
}

onMounted(() => {
  routes.forEach(item => {
    if (hasCurrentRourte(item.children)) {
      selectedKeys.value = [item.path]
      appRouter.changeNavbar(item.path, 'init')
      appRouter.changeSiderRoute()
    }
  })
})

</script>

<style lang="less" scoped >
.header {
  position: relative;
  z-index: 2;
}

.logo {
  width: 48px;
  height: 48px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>