如上图所示，就是常见的面包屑效果，面包屑的内容一般来说，具有一定的层级关系，就以上图为例，首先是进入 首页 ，然后点击左侧导航，进入 活动管理 下的 活动列表 页面，然后点击某一条数据，进入 活动详情 页面

这正好与 vue-router 的 mached 属性所获取的结果有着相似的原理，所以可以基于此来实现面包屑效果！

这里使用了 elementui 的面包屑组件和导航菜单组件，先贴出最后的效果图：

export default {
    data(){
        return{
    computed:{
        // 侧边导航数据
        routes(){
            // 从$router.options中获取所有路由信息并过滤
            return this.$router.options.routes.filter((item)=>{
                return item.meta.showInbreadcrumb
        // 面包屑数据
        breadcrumb(){
            // 根据路由配置meta中的showInbreadcrumb字段过滤
            let matchedArr = this.$route.matched.filter((item)=>{
                return item.meta.showInbreadcrumb}
            // 因为首页比较特殊，必须一直显示在面包屑第一个，如果没有首页路由信息，手动添加到最前面
            if(matchedArr[0].meta.title !== '首页'){
                matchedArr.unshift(
                        path:'/home',
                        meta:{  
                            title:"首页",
                            showInbreadcrumb:true
            return matchedArr;
 vue部分
<div class="content">
            <!-- 面包屑 -->
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>