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

相关推荐
uhakadotcom1 分钟前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
给月亮点灯|14 分钟前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He16 分钟前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头21 分钟前
v-model与.aync的区别
前端·javascript·vue.js
xvmingjiang1 小时前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭1 小时前
ES5 和 ES6 类的实现
前端·javascript·es6
2301_821046521 小时前
Python的深度学习
开发语言·javascript·ecmascript
小高0071 小时前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试
却尘1 小时前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js
Asort1 小时前
JavaScript 从零开始(三):浏览器控制台与VS Code协同工作环境搭建详解
前端·javascript