ElementPlus·面包屑导航实现

面包屑导航

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

javascript 复制代码
<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)

相关推荐
雾恋3 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊3 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A4 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理4 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人4 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥305 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董5 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon5 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii6 小时前
JAVA Web —— A / 网页开发基础
前端
gnip6 小时前
pnpm 的 monorepo架构多包管理
前端·javascript