vue 动态显示三级路由

无需 vuex、本地存储实现动态显示三级路由。

目录

一、需求描述： 

二、代码

2.1 路由配置

1. 我的一级菜单和二级菜单的路由配置的：

2. 三级菜单的路由配置：

3. 上面有几个变量和要注意的细节：

2.2 封装导航栏

2.3 封装面包屑

2.4 页面布局

---

一、需求描述： 

   之前写过一个 element实现动态路由+面包屑，这个需求是嵌套的页面层级太多了，需要在页面中点击某个按钮，跳转到下一个页面（即该页面的子页面），在下一个页面的面包屑中显示所有前一级的路由。面包屑显示关系为：组先 - 父页面 - 当前页面。

   现在这个需求是：已确定路由中包含3级菜单，如果有3级菜单，在点击二级菜单的时候，在面包屑中将该二级菜单下所有的3级菜单都显示出来；如果是一级菜单没有子菜单，或者只有二级菜单，那么面包屑中就显示一级菜单名称或二级菜单名称。如下图：

（ 上面图2中，“一级标题3”下应该是“二级标题3-1”，不小心写错了）

二、代码

  由于项目周期比较紧，代码一切从简。

2.1 路由配置

这里分布例举一下我的一级菜单、二级菜单和三级菜单的路由配置，具体 path、name、meta.title、meta.icon、component、redirect 等值需要自己去设置。

1. 我的一级菜单和二级菜单的路由配置的：

{
    path: '/menu4',
    name: 'userRoleManage',
    meta: {title: "一级标题4", leaf: true, hidden: false,icon:"my-icon-labelManage"},
    component: () => import('@/components/myLayout'),
    redirect: "/menu4/menu41",
    children:[
      {
        path: 'menu41',
        name: 'menu41',
        meta: {title: "一级标题4", hidden: false},
        component: () => import('@/views/menu4/menu41.vue')
      }
    ]
},
{
  path: '/outWh',
  name: 'outWh',
  meta: {title: "一级标题3", leaf: false, hidden: false, icon: 'my-icon-packProduct'},
  component: () => import('@/components/myLayout'),
  redirect: "/outWh/list",
  children:[
    {
      path: 'list',
      name: 'list',
      meta: {title: "二级标题3-1", hidden: false},
      component: () => import('@/views/outWh/list.vue')
    },    
    {
      path: 'codeInfo',
      name: 'codeInfo',
      meta: {title: "二级标题3-2", hidden: false},
      component: () => import('@/views/outWh/codeInfo.vue')
    }
  ]
}

2. 三级菜单的路由配置：

{
  path: '/basicData',
  name: 'basicData',
  meta: {title: "一级标题1", leaf: false, hidden: false,icon:"my-icon-labelManage"},
  component: () => import('@/components/myLayout'), //组件-封装好的头部、导航等页面整体框架
  redirect: "/basicData/goodsInfo",
  children:[
    {
      path: 'goodsInfo',
      name: 'goodsInfo',
      meta: {title: "二级标题1-1", hidden: false},
      component: () => import('@/views/basicData/goodsInfo.vue')
    },
    {
      path: 'warehouseInfo',
      name: 'warehouseInfo',
      meta: {title: "二级标题1-2", hidden: fa