ElementPlus·面包屑导航实现

面包屑导航

使用vue3中的UI框架elementPlus的 <el-breadcrumb> 实现面包屑导航

<template>
     <!-- 面包屑 -->
     <div class="bread-container" >
         <el-breadcrumb separator=">">
             <el-breadcrumb-item :to="{ path:'/' }">首页</el-breadcrumb-item>
             <el-breadcrumb-item>{{ categoryList.name }}</el-breadcrumb-item>
         </el-breadcrumb>
     </div>
</template>

其中，<el-breadcrumb> 中的 separator为分割符，<el-breadcrumb-item>为面包屑的每一项。

参考官方文档：Breadcrumb 面包屑 | Element Plus (element-plus.org)