<template>
|
<el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight">
|
<!--<el-breadcrumb-item class="hover-item" :to="{ path: '/' }">首页</el-breadcrumb-item>-->
|
<el-breadcrumb-item v-for="item in matched" :key="item.path" :class="{ 'hover-item': !item.meta.type }"
|
@click="targetViewShow(item)">
|
{{ item.meta.title }}
|
</el-breadcrumb-item>
|
</el-breadcrumb>
|
</template>
|
|
<script setup lang="ts">
|
import router from '@/router';
|
import {ArrowRight} from '@element-plus/icons-vue'
|
import {computed} from 'vue'
|
import {useRoute} from 'vue-router'
|
import {useNavTabs} from '@/stores/modules/navTabs' // 标签导航
|
const navTabsStore = useNavTabs()
|
const route = useRoute();
|
const matched = computed(() => route.matched.filter((item) => item.meta && item.meta.title && item.meta.title !== '首页'));
|
const updateTab = function (newRoute: any) {
|
// 添加tab
|
navTabsStore.addTab(newRoute)
|
// 激活当前tab
|
navTabsStore.setActiveRoute(newRoute)
|
// nextTick(() => {
|
// selectNavTab(tabsRefs.value[navTabsStore.$state.activeIndex])
|
// })
|
}
|
const targetViewShow = (routeItem: any) => {
|
if (!routeItem.meta.type) {
|
router.push(routeItem.path)
|
updateTab(routeItem)
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.breadcrumb {
|
width: 100%;
|
display: flex;
|
}
|
</style>
|
|
<style lang="scss">
|
.breadcrumb {
|
.el-breadcrumb__inner.is-link {
|
color: #606266;
|
font-weight: normal;
|
}
|
|
.hover-item {
|
.el-breadcrumb__inner:hover {
|
cursor: pointer;
|
color: #303133;
|
font-weight: bold;
|
}
|
}
|
|
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
|
color: #303133;
|
font-weight: bold;
|
}
|
}
|
</style>
|
