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

相关推荐
codingandsleeping9 分钟前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端1 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 小时前
Promise 的使用
前端·javascript
用户51681661458413 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅3 小时前
JavaScript 作用域
前端·javascript
前端缘梦3 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖3 小时前
JS核心知识-事件循环
前端·javascript
Simon_He3 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown