element-plus的面包屑组件el-breadcrumb

面包屑组件主要用来显示当页面路径,以及快速返回之前的页面。

涉及2个组件

el-breadcrumb 和el-breadcrumb-item,

el-breadcrumb的spearator指定item的分隔符

el-breadcrumb-item的to和replace属性和vue-router的一致,需要结合vue_router一起使用

用法如下

javascript 复制代码
<script setup lang="ts">
import { aG } from 'vitest/dist/reporters-LqC_WI4d.js';
import { onMounted, reactive, ref, watch } from 'vue'
import { RouterLink, RouterView,useRoute,useRouter } from 'vue-router'



</script>


<template>

  <div>
    <el-container>
      <el-header></el-header>
      <el-main>
        
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{path:'/'}">homepage</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/about'}">a</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/test'}">b</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/test'}">c</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/test'}">d</el-breadcrumb-item>
          </el-breadcrumb>


          <router-view v-slot="{ Component }">
        <keep-alive >
          <component :is="Component" :key="$route.fullPath" />
        </keep-alive>
      </router-view>

      </el-main>
      <el-footer></el-footer>

    </el-container>


  </div>



</template>

<style scoped></style>

vue-router配置如下

javascript 复制代码
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ChatRoom from '@/components/ChatRoom.vue';

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: ChatRoom
    }
  ]
})

export default router

文档链接
https://element-plus.org/zh-CN/component/breadcrumb.html

相关推荐
lecepin7 分钟前
AI Coding 资讯 2025-10-22
前端·javascript·后端
gustt9 分钟前
深入理解 JavaScript 的对象与代理模式(Proxy)
javascript
3秒一个大20 分钟前
JavaScript 对象:从字面量到代理模式的灵活世界
javascript
前端付豪1 小时前
万事从 todolist 开始
前端·vue.js·前端框架
梦想CAD控件2 小时前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
讨厌吃蛋黄酥2 小时前
🔥 JavaScript异步之谜:单线程如何实现“同时”做多件事?99%的人都理解错了!
前端·javascript·面试
华仔啊2 小时前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保2 小时前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
渣哥2 小时前
Spring Boot 本质揭秘:约定优于配置 + 自动装配
javascript·后端·面试
颜酱3 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化