基于vue-router的matched实现面包屑功能

本文链接：https://blog.youkuaiyun.com/weixin_42205101/article/details/120477507

本文介绍了如何利用vue-router的matched属性创建面包屑导航。通过路由配置和组件结合，实现面包屑的层级关系。在获取路由信息时，需要注意处理matched数组，避免页面错误。最终展示了面包屑导航的实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
如上图所示，就是常见的面包屑效果，面包屑的内容一般来说，具有一定的层级关系，就以上图为例，首先是进入首页，然后点击左侧导航，进入活动管理下的活动列表页面，然后点击某一条数据，进入活动详情页面

这正好与vue-router的mached属性所获取的结果有着相似的原理，所以可以基于此来实现面包屑效果！

这里我使用了elementui的面包屑组件和导航菜单组件，先贴出最后的效果图：

在这里插入图片描述

路由配置

项目结构：
在这里插入图片描述
侧边导航栏是首页、电子数码、服装鞋帽页面都会显示的，所以我创建了一个layout组件，将这三个路由的component都指向该组件，并将导航栏和面包屑都写在layout组件中

因为该功能的实现依赖于路由的层级嵌套关系，所以要提前构思好路由的配置，我这里的路由配置如下：

const routes = [
	//匹配空路由，重定向到根路由
    {
   
        path:'',
        redirect: '/home',
        meta:{
   
            showInbreadcrumb:false
        }
    },
    //根路由
    {
   
        path:'/home',
        component: ()=>import('@/views/layout/index.vue'),
        name:'home',
        meta:{
   
            title:"首页",
            showInbreadcrumb:true
        }
    },
    //电子数码
    {
   
        path:'/electronics',
        name:'电子数码',
        component: ()=>import('@/views/layout/index.vue'),
        redirect: '/electronics/computer',
        meta:{
   
            title:"电子数码",
            showInbreadcrumb:true
        },
        children:[
            {
   
                path:'computer',
                name:'computer',
                component()=>import('@/views/electronics/children/computer/index.vue'),
                meta:{
   
                    title:"电脑",
                    showInbreadcrumb:true
                }
            },
            {
   
                path: