效果图
面包屑二次封装代码
<template>
<div class="breadcrumb-tip">
<div class="flex-start">
<span class="current-position">当前位置:</span>
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item, index) in list" :key="index">
<a @click.prevent="handleClick(item)">{{ item.text }}</a>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => [],
},
},
methods: {
handleClick(item) {
if (item.to && item.to.name) {
this.$router.push({
name: item.to.name,
params: {
...item.to.params,
},
query: {
...item.to.query,
},
});
}
},
},
};
</script>
<style scoped>
.flex-start {
display: flex;
justify-content: flex-start;
align-items: center;
}
</style>
main.js中全局注册组件
import Vue from "vue";
import Breadcrumb from "@/components/Page/Breadcrumb"
Vue.component("Breadcrumb", Breadcrumb);
单页面使用
<template>
<div class="page">
<Breadcrumb :list="list"/>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
text: "课程池管理",
to: {
name: "course-manage", //返回上个页面的路由
},
},
{
text: "教学团队管理",
},
],
};
},
};
</script>