vue項(xiàng)目導(dǎo)航菜單問題

目標(biāo)：橫向菜單點(diǎn)擊跳轉(zhuǎn)，顏色變換，刷新可保持狀態(tài)

// 模板template中通過循環(huán)菜單列表生成，動(dòng)態(tài)類名改變顏色    

    <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",
        },
      ],
      // 保存當(dāng)前的菜單的下標(biāo)，每次點(diǎn)擊切換菜單改變，并且刷新時(shí)組件加載也要改變
      currentIndex: 0,
}

 methods: {
    navigate(path, index) {
      this.currentIndex = index;
      this.$router.push(path);
    },
 }

  mounted() {
    // 路由中配置meta屬性，保證每次刷新都能拿到當(dāng)前的菜單下標(biāo)
    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,
        },
      },
       .......
 ],

總結(jié)：

1. 通過循環(huán)下標(biāo)標(biāo)記每個(gè)菜單

2. 動(dòng)態(tài)類名對(duì)比菜單的下標(biāo)和自己當(dāng)前的下標(biāo)

3. 點(diǎn)擊更改當(dāng)前下標(biāo)，組件加載更改當(dāng)前下標(biāo)（配合路由表meta屬性）