Vueルーティング（ルーター）は、ナビゲーションバーの画像の切り替えを実現します

ナビゲーションバーは、画像の切り替え、つまりクリックすると画像のパスが変更されることを実現します。一般的な考え方、つまりクリックするたびにメソッドを呼び出すと、他のナビゲーション画像も変更されます。面倒。1つまたは2つのナビゲーションで問題ありません。複数のナビゲーションが記述されている場合、コードは複雑すぎます。

最適化のアイデア：

1.コンテナを作成し、各ナビゲーションオプションの
コンテンツをオブジェクトとして保存します。コンテンツには次のものが含まれます。

• 切り替え前後の画像
• ナビゲーションスイッチはルーティングによって実装されるため、オブジェクトの各属性にパスを追加する必要があります。v-forトラバーサルの実装に使用する場合は、各<router-link> </ router-link>タグにto属性を追加します。

export default {
  data(){
    return{
     //底部导航栏的切换
     navPicArray:[
       {
         icon:require('./图片/首页.png'),
         active:require('./图片/点击首页.png'),
         path:"/commend",
         name:"首页"
       },
       {
        icon:require('./图片/分类.png'),
         active:require('./图片/点击分类.png'),
         path:"/greencat",
         name:"分类"
       },
       {
        icon:require('./图片/购物车.png'),
         active:require('./图片/购物车.png'),
         path:"/buycar",
         name:"首页"
       },
       {
        icon:require('./图片/我的.png'),
         active:require('./图片/点击我的.png'),
         path:"/mine",
         name:"我的"
       },
     ],
     num:0,
    }
  },
  methods:{
    changeImg(index){
      console.log("index改变之前"+index)
     
     this.num=index
     console.log("index改变之后"+index)
  
    }
  }

}

2. v-forを使用して、各ルーターのコンテンツをトラバースします。ルーターごとにクリック機能が実装されています。クリックすると、現在のルーターが配置されているナビゲーション画像が強調表示され、その他は元の画像になります。ここではインデックスを使用しています。そして、新しい属性変数num = 0を作成します。インデックスと数値が等しい場合は画像が強調表示され、等しくない場合は元の画像になります。

<div id="app">
    <div id="nav">
      <ul>
        <li 
        v-for="(item,index) in navPicArray"
        :key="index"
        @click="changeImg(index)"
      
        >
      <router-link :to="item.path" >
      <img  alt="" v-bind:src="item.icon" v-show="index!=num">
      <img  alt="" v-bind:src="item.active" v-show="index==num">
      </router-link>

        </li>
      </ul>

    </div>
    <router-view/>
  </div>

効果画像：