动态面包屑

路由对象的matched属性可以获得当前路由的信息（包括一级路由和二级路由）

如果此时点击了一个二级路由，除了本身的路由信息，也会有父路由的信息

因此适合做动态面包屑

 代码如下：

                <!-- 面包屑的分割图标 --> 
 <el-breadcrumb separator-icon="ArrowRight">
        <!-- 面包动态展示路由名字与标题 -->
        <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" 
         v-show="item.meta.title" :to="item.path">
            <!-- 图标 -->
            <el-icon>
                <component :is="item.meta.icon"></component>
            </el-icon>
            <!-- 面包屑展示匹配路由的标题 -->
            <span>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>

注意① 这里不能用v-if ，因为在vue3中，优先级 v-if >v-for >v-show，这里要先循环再判断，不能用 v-if ，判断的逻辑是如果路由没有标题（layout）就隐藏，不然不好看

② to 属性是 elemnt-plus 里自带的，意为跳转，即点击面包屑也可以跳转到相应的路由

效果如下：