基本適用於所有面面包屑導航
<template>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ name: 'Index' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
// 初始化數據對象
data() {
return {
breadList: []
};
},
// 監聽屬性
watch: {
// 監聽路由
$route(val) {
console.log(val,'valvalvalvalvalvalval')
// 調用獲取路由數組方法
this.getBreadList(val);
}
},
// 自定義事件
methods: {
/**
* @description 獲取路由數組
* @params val 路由參數
* @author tw
*/
getBreadList(val) {
this.breadList = [];
// 過濾路由matched對象
if (val.matched) {
let matched = val.matched.filter(item => item.meta && item.meta.title);
console.log(matched,'面包屑導航')
// 拿到過濾好的路由v-for遍歷出來
//this.breadList = matched;
for (var i = 0; i < matched.length; i++) {
if (matched[i].meta.parentTitle) {
this.breadList.push(matched[i].meta.parentTitle);
}
this.breadList.push(matched[i].meta.title);
}
}
}
}
};
</script>
<style lang="scss" scoped>
/* 面包屑導航 */
.el-breadcrumb {
margin-top: 20px;
font-size: 14px;
}
</style>