【前端学习日记】ElementUi+导航菜单+面包屑+Tag标签联动

目录

导航菜单的渲染

路由跳转联动面包屑

标签联动

总结

思路:导航菜单是负责路由跳转的,面包屑和Tags标签通过读取事件路由跳转的数据进行渲染,这里涉及到组件间通信,使用vuex状态管理器来管理这部分数据。

使用json-server模拟从后端返回的接口数据:

附上使用文档:GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

db.json文件中的数据如下:

"menu": [
    {
      "path":"/",
      "name": "layout",  
      "label": "首页",
      "icon": "el-icon-menu",
      "url": "layoutPage/layoutPage"
    },
    {
      "label": "个人中心",
      "icon": "el-icon-user-solid",
      "children": [
          {
          "path":"/student",
          "name": "student",  
          "label": "学生信息",
          "icon": "el-icon-user",
          "url": "user/studentMessage"
        },
        {
          "path":"/item",
          "name": "item",  
          "label": "项目管理",
          "icon": "el-icon-s-cooperation",
          "url": "item/itemPage"
        }
      ] 
    },
    {
      "label": "课程信息",
      "icon": "el-icon-s-order",
      "children": [
          {
          "path":"/course",
          "name": "course",  
          "label": "我的课程",
          "icon": "el-icon-notebook-2",
          "url": "course/myCourse"
        }
      ] 
    },
    {
      "path":"/library",
      "name": "library",  
      "label": "图书馆",
      "icon": "el-icon-reading",
      "url": "library/libarayPage"
    }
  ]

导航菜单的渲染

导航菜单的渲染使用ElmentUI插件库中的--NavMenu 导航菜单,具体的代码就不赘述,自行去官网查看。

使用mount钩子在每次组件挂载时从后端请求数据,注入到data中,以便后面直接使用v-for遍历出来菜单。这里涉及到子菜单,所以需要将返回的数据分为有子菜单和无子菜单的两种,在计算属性中完成。但后面发现这种方法优缺点,不能控制有子选项和无子选项的先后位置,总是会默认将无子选项的渲染在前面。

  • 6
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值