vue项目elementUI面包屑的封装

最新推荐文章于 2024-07-24 15:04:26 发布

花程序媛

最新推荐文章于 2024-07-24 15:04:26 发布

阅读量1.6k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/shizhihua11/article/details/105621791

版权

本文档介绍了在一个包含三级菜单的Vue项目中如何进行面包屑导航的封装。首先，讨论了路由配置文件的重要性，指出面包屑依赖于vue-router的路由层级，并强调每级路由需包含component和router-view。接着，详细讲述了菜单渲染递归组件的实现，包括菜单渲染页面和sidebar-item组件。最后，阐述了面包屑的封装过程，包括渲染页面和获取面包屑列表的方法，特别指出在处理详情页面时需要注意上级页面的内容展示问题。

摘要由CSDN通过智能技术生成

一般项目的菜单只有两级菜单，但是现在做的项目中有三级菜单；
对应的第三级菜单下还有新增编辑和详情页面；
层级较多有十级左右，所以需要面包屑的展示；
本文章主要就项目中面包屑封装做一个总结；

1.路由配置文件

面包屑时根据vue-router的路由循环生成；所以想要展示的面包屑有多少层级，路由就有多少层级

路由层级（三级菜单）

每级都要有component，component对应页面要有对应的router-view, 否则会出出现公共部分没有内容的问题；
子级菜单会展示上级的component页面内容；所以是公共部分；但是第三级页面和详情页面因为没有什么公共部分，做了判断处理

export const routeMap =[
  // 1
  {
    path: '/',
    name: 'service',
    redirect: '/service/node-service/s2service',
    meta: { title: '1', keepAlive: true, icon: 'table', permission: [ 'dashboard' ] },
    component: Menu,
    children: [
      // 1-1
      {
        path: '/service/node-service',
        name: 'nodeService',
        meta: { title: '1-1', keepAlive: false, permission: [ 'dashboard' ] },
        component: Base,
        children: [
          {
            path: '/service/node-service/s2service',
            name: 's2service',
            component: () => import('@/modules/region/index.vue'),
            meta: { title: '1-2', permission: [ 'table' ] }
          },
        ]
      },
    ]
  },

  // 2
  {
    path: '/resources',
    name: 'resources',
    redirect: '/resources/resources-pool',
    meta: { title: '2', keepAlive: true, icon: