vue项目导航菜单实现

  • vue项目导航菜单实现已关闭评论
  • 17 次浏览
  • A+
所属分类:Web前端
摘要

目标:横向菜单点击跳转,颜色变换,刷新可保持状态通过循环下标标记每个菜单


vue项目导航菜单问题

目标:横向菜单点击跳转,颜色变换,刷新可保持状态

// 模板template中通过循环菜单列表生成,动态类名改变颜色          <li         v-for="(item, index) in navList"         :key="index"         v-text="item.name"         :class="{ 'active-color': index === currentIndex }"         @click="navigate(item.path, index)"     ></li>  data() {     return {       navList: [         {           name: "777",           path: "/intelligent",         },         {           name: "666",           path: "/malfunction",         },         {           name: "555",           path: "/status",         },         {           name: "444",           path: "/system",         },         {           name: "333",           path: "/three",         },       ],       // 保存当前的菜单的下标,每次点击切换菜单改变,并且刷新时组件加载也要改变       currentIndex: 0, }   methods: {     navigate(path, index) {       this.currentIndex = index;       this.$router.push(path);     },  }    mounted() {     // 路由中配置meta属性,保证每次刷新都能拿到当前的菜单下标     this.currentIndex = this.$route.meta.index;   },  // 路由表 [       {         path: "intelligent",         name: "work",         component: () => import("@/views/zltc/intelligentwork/IndexItem.vue"),         meta: {           index: 0,         },       },       {         path: "malfunction",         name: "malfunction",         component: () =>           import("@/views/zltc/malfunctiondiagnosis/IndexItem.vue"),         meta: {           index: 1,         },       },        .......  ], 
总结:
  1. 通过循环下标标记每个菜单

  2. 动态类名对比菜单的下标和自己当前的下标

  3. 点击更改当前下标,组件加载更改当前下标(配合路由表meta属性)