本文实例为大家分享了Vue实现动态面包屑导航的具体代码,供大家参考,具体内容如下 动态面包屑导航是根据路由中的matched获取到的单独提取出面包屑导航栏组件 <templat
本文实例为大家分享了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-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" />
--结束END--
本文标题: vue实现动态面包屑导航
本文链接: https://www.lsjlt.com/news/145822.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0