【前端学习日记】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遍历出来菜单。这里涉及到子菜单，所以需要将返回的数据分为有子菜单和无子菜单的两种，在计算属性中完成。但后面发现这种方法优缺点，不能控制有子选项和无子选项的先后位置，总是会默认将无子选项的渲染在前面。