利用Element-plus + matched 实现面包屑组件功能

利用Element-plus + matched 实现面包屑组件功能

配置路由信息

{
        path: '/:catchAll(.*)',
        name: 'Error',
        hidden: true,
        component: () => import('@/components/error.vue')
    },
    {
        path: '/',
        redirect: '/login',
        hidden: true,
        component: ()=>import('@/components/login.vue')
    },
    {
        path: '/login',
        name: 'Login',
        hidden: true,
        component: () => import('@/components/login.vue')
    },
    {
        path: '/home',
        name: '学生管理',
        component: () => import('@/views/home'),
        children: [
            {
                path: '/home/student',
                name:'学生列表',
                component: () => import('@/views/student/StudentList.vue')
            },
            {
                path: '/home/info',
                name: '信息列表',
                component: () => import('@/views/student/InfoList.vue')
            },
            {
                path: '/home/infomanage',
                name: '信息管理',
                component: () => import('@/views/student/InfoManager.vue')
            },
            {
                path: '/home/worklist',
                name: '作业信息',
                component: () => import('@/views/student/WorkList.vue')
            },
            {
                path: '/home/workmanage',
                name: '作业管理',
                component: () => import('@/views/student/WorkManager.vue')
            },
        ]
    },
    {
        path: '/home',
        name: '数据分析',
        component: () => import('@/views/home'),
        children: [
            {
                path: '/home/dataview',
                name:'数据概览',
                component: () => import('@/views/dataAnalysis/DataView.vue')
            },
            {
                path: '/home/mapview',
                name:'地图概览',
                component: () => import('@/views/dataAnalysis/MapView.vue')
            },
            {
                path: '/home/travel',
                name:'旅游地图',
                component: () => import('@/views/dataAnalysis/TravelMap.vue')
            },
            {
                path: '/home/score',
                name:'分数地图',
                component: () => import('@/views/dataAnalysis/ScoreMap.vue')
            }
           
        ]
    },
    {
        path: '/home',
        name: '用户中心',
        hidden: true,
        component: () => import('@/views/home'),
        children: [
            {
                path: '/home/user',
                name: '用户信息',
                component: () => import('@/views/user/User.vue')
            }
        ]
    }

Element-plus 面包屑组件

 <el-card>
   <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">{{item.name}}</el-breadcrumb-item
    >
  </el-breadcrumb>
  </el-card>

！！！重点：路由API
matched ( 实现面包屑功能专用)
类型：RouteRecordNormalized[]
内容：与给定路由地址匹配的标准化的路由记录数组

方法：
1.在模板中使用$route.matched 获取到路由记录
2.setup中：

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
const route = useRoute()
//装路由数据的数组
const menus = ref([])

watch(
  ()=> route.matched,
  (newV) => {
    menus.value = newV
  },
  {
    immediate: true
  }
)
<script> 

效果