vue项目nav导航栏的实现（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, }, }, ....... ], 总结：

通过循环下标标记每个菜单

动态类名对比菜单的下标和自己当前的下标

点击更改当前下标  


  


  


，组件加载更改当前下标（配合路由表meta属性）