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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。