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