vue实现动态面包屑导航
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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" />
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
