measure/src/layout/modules/RouterMenu.vue

<template>
    <el-scrollbar>
        <div class="hc-router-tab-box">
            <div class="hc-router-tab-item" :class="(barRoutes.key === 'home' || barRoutes.key === 'home-index') ? 'cur' : ''" @click="toHomeClick">首页</div>
            <template v-for="(item, index) in barMenuData" :key="item.key">
                <div
                    :class="item.key === barRoutes.key ? 'cur' : ''" class="hc-router-tab-item"
                    @click="barMenuClick(item)" @contextmenu.prevent="barMenuContextMenu($event, item, index)"
                >
                    <span>{{ item.title }}</span>
                    <div class="close-icon" @click.stop="barMenuCloseClick(item, index)">
                        <HcIcon name="close" />
                    </div>
                </div>
            </template>
        </div>
    </el-scrollbar>
    <!-- 右键菜单 -->
    <HcContextMenu ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect" />
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getStore, setStore } from 'hc-vue3-ui'

const emit = defineEmits(['load'])
//初始组合式
const router = useRouter()
const useRoutes = useRoute()

//初始变量
const barMenuData = ref(getStore('bar-menu-datas') || [])
const barRoutes = ref({ key: '', path: '', title: '', query: null })

//渲染完成
onMounted(() => {
    const { name, path, meta, query } = useRoutes
    barRoutes.value = { path, key: name, title: meta?.title, query }
    setBarMenuData()
})

//监听
watch(() => [
    useRoutes?.name,
    useRoutes?.path,
    useRoutes?.query,
    useRoutes?.meta?.title,
], ([key, path, query, title]) => {
    barRoutes.value = { path, key, title, query }
    setBarMenuData()
})

//设置菜单数据
const setBarMenuData = () => {
    const { key, path, title, query } = barRoutes.value
    if (['home', 'home-index'].indexOf(key) === -1) {
        const index = barMenuData.value.findIndex(item => item.key === key)
        if (index === -1) {
            barMenuData.value.push({ path, key: key, title, query })
        }
        setStore('bar-menu-datas', barMenuData.value)
    }
    emit('load', barRoutes.value)
}

//菜单被点击
const barMenuClick = (item) => {
    const { key } = barRoutes.value
    if (key !== item.key) {
        router.push({ name: item.key, query: item.query })
    }
}

//鼠标右键菜单
const contextMenuRef = ref(null)
const barItem = ref({})
const barItemIndex = ref(0)
const menusData = ref([
    { label: '关闭当前', key: 'close' },
    { label: '关闭所有', key: 'all' },
    { label: '关闭其它', key: 'other' },
])
const barMenuContextMenu = (event, item, index) => {
    event.preventDefault()
    barItem.value = item
    barItemIndex.value = index
    contextMenuRef.value?.showMenu(event)
}

//鼠标右键菜单被点击
const handleMenuSelect = ({ key }) => {
    if (key === 'close') {
        barMenuCloseClick(barItem.value, barItemIndex.value)
    } else if (key === 'all') {
        barMenuData.value = []
        setStore('bar-menu-datas', [])
        router.push({ name: 'home-index' })
    } else if (key === 'other') {
        const { key } = barRoutes.value
        barMenuData.value = barMenuData.value.filter(item => item.key === key)
        setStore('bar-menu-datas', barMenuData.value)
    }
}

//菜单关闭被点击
const barMenuCloseClick = (item, index) => {
    const total = barMenuData.value.length - 1
    const { key } = barRoutes.value
    barMenuData.value.splice(index, 1)
    if (key === item.key) {
        let items = {}
        const indexs = barMenuData.value.length - 1
        if (total > index) {
            items = barMenuData.value[index]
        } else if (indexs >= 0) {
            items = barMenuData.value[indexs]
        }
        if (indexs < 0) {
            setStore('bar-menu-datas', barMenuData.value)
            router.push({ name: 'home-index' })
        } else {
            barRoutes.value = items
            setStore('bar-menu-datas', barMenuData.value)
            router.push({ name: items.key, query: items.query })
        }
    } else {
        setStore('bar-menu-datas', barMenuData.value)
    }
}

//点击了首页
const toHomeClick = () => {
    router.push({ name: 'home' })
}
</script>