- BreadCrumb.vue
<template>
<div class="breadcrumb-container">
<i class="el-icon-s-home"></i>
<el-breadcrumb separator-class="el-icon-arrow-right">
<transition-group name="breadcrumb">
<el-breadcrumb-item :to="{ name: 'Home' }" key="pages">首頁</el-breadcrumb-item>
<template v-for="(item,i) of levelList">
<el-breadcrumb-item :key="item.name" v-if="item.meta.title">
<span v-bind:class="{redirect:i<levelList.length-1}" :key="item.name" @click="routeTo(item,i<levelList.length-1)">
{{item.meta.title}}
</span>
</el-breadcrumb-item>
</template>
</transition-group>
</el-breadcrumb>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "BreadCrumb",
created() {
this.getBreadcrumb()
},
data() {
return {
levelList: null
}
},
computed: {
...mapGetters('User',['asyncRoutesObj']),
},
watch: {
$route:{
handler(){
this.getBreadcrumb()
},
deep:true,
immediate:true
}
},
methods: {
routeTo(data,flag){
if(flag){
let currentRouter=this.asyncRoutesObj[data.name]||{};
if(Array.isArray(currentRouter.children) && currentRouter.children.length){
this.$router.push({
name: currentRouter["children"][0].name,
}).catch((err) => {});
} else {
this.$router.push({
name: currentRouter.name,
}).catch((err) => {});
}
}
},
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name);
this.levelList = matched;
}
}
}
</script>
<style lang="scss" scoped>
.breadcrumb-container{
width: 100%;
overflow: hidden;
padding: 15px 5px;
display: flex;
align-items: center;
background: none;
.el-icon-s-home{
margin-right: 5px;
}
}
.redirect{
font-weight: 700;
color: #303133;
&:hover{
color: #409EFF;
cursor: pointer;
}
}
</style>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
