vue项目导航菜单实现

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属性）