解決vue項目刷新后,導航菜單高亮顯示的位置不對問題


<template>
  <div class="menu">
    <div :class="index==menuIndex?'active':'menu-box'" v-for="(item,index) in menu" :key="index" @click="setMenu(index)">
      <router-link :to="item.path"> <span>{{item.name}}</span></router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          name: "水質預報",
          sort: 1,
          path: "/decisionSupport/waterQualityForecast",
        },
        {
          name: "水質評價",
          sort: 2,
          path: "/decisionSupport/graphAssociation",
        },
        {
          name: "防洪預報",
          sort: 3,
          path: "/decisionSupport/floodControlForecast",
        },
        {
          name: "水量調度",
          sort: 4,
          path: "/decisionSupport/waterDispatching",
        },
        // {
        //   name: "產匯流",
        //   sort: 5,
        //   path:  "/decisionSupport/graphAssociationddd",
        // },
        {
          name: "決策分析",
          sort: 6,
          path: "/decisionSupport/decisionAnalysis",
        },
        {
          name: "應急處置",
          sort: 7,
          path: "/decisionSupport/planaking",
        },
        // {
        //   name: "應急處置",
        //   sort: 7,
        //   path: "/",
        //   children: [
        //     {
        //       name: "預案模板",
        //       path: "/decisionSupport/planaking",
        //     },
        //     {
        //       name: "方案制定",
        //       path: "/decisionSupport/planMaking",
        //     },
        //     {
        //       name: "方案執行指揮",
        //       path: "/decisionSupport/planeDelivery",
        //     },
        //   ],
        // },
      ], //菜單數組
      menuIndex: 0, //菜單下標
    };
  },
  // 這里解決刷新高亮位置改變的代碼
  mounted(){
    this.menu.some((item,i)=>{
      if(item.path==this.$route.path){
        this.menuIndex = item.sort-1;
      }
    })
  },


  methods: {
    //菜單選項卡下標切換
    setMenu(params) {
      this.menuIndex = params;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM