vue实现动态面包屑导航
本文实例为大家分享了vue实现动态面包屑导航的具体代码，供大家参考，具体内容如下
动态面包屑导航是根据路由中的matched获取到的
单独提取出面包屑导航栏组件
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="{ path: item.path }">
<span>{{ item.meta.title }}</span>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
export default {
data () {
return {
levelList: null
}
},
watch: {
$route () {
this.getBreadcrumb()
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb () {
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
const first = matched[0]
if (!this.isIndex(first)) {
matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
this.levelList = matched
} else {
this.levelList = [{ path: '/index', meta: { title: '首页' } }]
}
},
isIndex (route) {
const redirect = route && route.redirect
if (!redirect) {
return false
}
return redirect === '/index'
}
},
}
</script>
<style lang="scss">
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}
.breadcrumb-move {
transition: all .5s;
}
.breadcrumb-leave-active {
position: absolute;
}
.app-breadcrumb.el-breadcrumb {
margin-left: 8px;
}
</style>
在布局组件中应用
<!-- 面包屑 -->
<dBreadcrumb class="breadcrumb-container" />
相关文章
Jenna
2020-10-09
Jillian
2020-12-17
Claire
2021-05-21
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20
Fern
2023-07-20
Irene
2023-07-20