526互联

基于vue-router的matched实现面包屑功能

发布时间 2023-07-02 23:04:16作者: JohnnyLei

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

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

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

js部分

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>
            </div>
      
        </div>