【前端学习日记】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
    评论
在Vue3和Element Plus中实现面包屑导航联动是相对简单的。下面是一个示例,你可以根据自己的需求进行调整。 首先,在你的组件中,你需要使用`el-breadcrumb`和`el-breadcrumb-item`组件来创建面包屑导航。然后,你可以通过`v-for`指令来遍历你的路由数组,动态生成面包屑导航项。当用户点击某个面包屑导航项时,你可以通过路由的`push`方法来实现路由的切换。 ```vue <template> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="(route, index) in routes" :key="index"> <span @click="goToRoute(route)">{{ route.name }}</span> </el-breadcrumb-item> </el-breadcrumb> </template> <script> export default { data() { return { routes: [ { name: '首页', path: '/' }, { name: '产品', path: '/products' }, { name: '商品详情', path: '/products/:id' }, ], }; }, methods: { goToRoute(route) { this.$router.push(route.path); }, }, }; </script> ``` 在这个示例中,我们使用了一个`routes`数组来存储我们的路由信息。每个路由对象都有一个`name`属性和一个`path`属性,分别表示面包屑导航项的显示名称和路由路径。当用户点击面包屑导航项时,我们调用`goToRoute`方法来切换路由。 需要注意的是,这里使用了Vue Router的`push`方法来实现路由的切换。你需要确保你已经正确配置了Vue Router,并且在使用该组件的父级组件中引入了Vue Router。 希望这个示例可以帮助到你实现Vue3和Element Plus的面包屑导航联动。如果你有任何进一步的问题,请随时提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值