学习笔记-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: '商户管理' },//在记录上附加自定义数据。