|
|
<template>
|
|
|
<!-- 面包屑导航组件，使用斜杠作为分隔符 -->
|
|
|
<el-breadcrumb class="app-breadcrumb" separator="/">
|
|
|
<!-- 动态过渡效果的面包屑项容器 -->
|
|
|
<transition-group name="breadcrumb">
|
|
|
<!-- 遍历生成面包屑项 -->
|
|
|
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
|
|
<!-- 如果是最后一项或设置了 noRedirect，则显示纯文本 -->
|
|
|
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
|
|
|
<!-- 否则显示可点击链接 -->
|
|
|
<a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
|
|
|
</el-breadcrumb-item>
|
|
|
</transition-group>
|
|
|
</el-breadcrumb>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import pathToRegexp from 'path-to-regexp' // 导入路径正则处理库
|
|
|
import { generateTitle } from '@/utils/i18n' // 导入标题生成工具方法
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
levelList: null // 存储面包屑层级数据
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
// 监听路由变化，更新面包屑数据
|
|
|
$route() {
|
|
|
this.getBreadcrumb()
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getBreadcrumb() // 初始化时获取面包屑数据
|
|
|
},
|
|
|
methods: {
|
|
|
generateTitle, // 注册标题生成方法
|
|
|
getBreadcrumb() {
|
|
|
// 只显示包含 meta.title 的路由
|
|
|
// 打印当前路由信息以便调试
|
|
|
console.log(this.$route)
|
|
|
let matched = this.$route.matched.filter(item => item.meta) // 过滤出包含 meta 的路由
|
|
|
const first = matched[0] // 获取第一个匹配的路由
|
|
|
matched = [{ path: '/index' }].concat(matched) // 将首页路径拼接到匹配路由前
|
|
|
|
|
|
this.levelList = matched.filter(item => item.meta) // 再次过滤以确保所有项都有 meta
|
|
|
},
|
|
|
// 判断是否为首页路由
|
|
|
isDashboard(route) {
|
|
|
const name = route && route.name // 获取路由名称
|
|
|
if (!name) {
|
|
|
return false // 如果没有名称，返回 false
|
|
|
}
|
|
|
return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase() // 比较名称是否为 "Index"
|
|
|
},
|
|
|
// 编译路径以解决动态参数问题
|
|
|
pathCompile(path) {
|
|
|
// 解决动态路由参数的问题
|
|
|
const { params } = this.$route // 获取当前路由参数
|
|
|
var toPath = pathToRegexp.compile(path) // 使用 path-to-regexp 编译路径
|
|
|
return toPath(params) // 返回编译后的路径
|
|
|
},
|
|
|
// 处理面包屑项的点击事件
|
|
|
handleLink(item) {
|
|
|
const { redirect, path } = item // 获取重定向路径和普通路径
|
|
|
if (redirect) {
|
|
|
this.$router.push(redirect) // 如果有重定向路径，则跳转到重定向路径
|
|
|
return
|
|
|
}
|
|
|
this.$router.push(path) // 否则跳转到指定路径
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.app-breadcrumb.el-breadcrumb {
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
font-size: 14px; /* 设置字体大小 */
|
|
|
line-height: 50px; /* 设置行高 */
|
|
|
margin-left: 8px; /* 设置左侧外边距 */
|
|
|
|
|
|
.no-redirect {
|
|
|
color: #97a8be; /* 设置不可跳转文字颜色 */
|
|
|
cursor: text; /* 设置鼠标样式为文本 */
|
|
|
}
|
|
|
}
|
|
|
</style>
|
