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