vue动态面包屑导航
风如也 人气:3动态面包屑导航是根据路由中的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" />
加载全部内容