学习笔记-Vue-2 Vue3后台管理单页面Breadcrumb 面包屑v-for循环遍历 同时设置不同的样式

直接放代码

          <el-breadcrumb separator=">">

            //固定第一个导航跳转到首页 下面在其中加了图标（阿里图标库）
            <el-breadcrumb-item :to="{ path: '/index' }">
                <span>
                    <svg
                      class="icon"
                      aria-hidden="true"
                      style="height: 14px; margin-right: 0px; padding-top: 0px">
                          <use xlink:href="#icon-home"></use></svg>
                </span>
                <span class="sy">首页</span>
            </el-breadcrumb-item>

            //这里的是根据路由配置循环遍历
            //一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象)                 
            //的$route.matched 数组。检查路由记录中的 meta 字段,我们需要遍历$route.matched 
            //需要在路由及子路由中配置meta
            //如 meta: { title: '商户管理' },//在记录上附加自定义数据。
            <template v-for="(item, a) in $route.matched" :key="item.name">
              <template v-if="item.meta && item.meta.title">
                <el-breadcrumb-item
                  ><span :class="sstt[a]">{{   //动态添加class样式
                    item.meta.title
                  }}</span></el-breadcrumb-item
                >
              </template>
            </template>
          </el-breadcrumb>

//script
        data() {
            return {
              sstt: ["ss1", "ss2"],
            };
          },
    
//css
        .ss1 {
          color: #999999;
        }
        .ss2 {
          font-weight: bold;
        }
        .sy {
          font-weight: normal;
        }

 这里使用的是vue3搭配的elementPlus面包屑导航组件

具体描述已在代码中注释

运行图