Vueプロジェクトヘッダールーティング、サイドバールーティングリンケージの問題

メニュー効果：頭の中の4つの大きなメニュー、頭の中の各メニューをクリックし、それに応じて左側のメニューバーを切り替え、ブラウザをクリックして更新し、各メニューのステータスを変更せずにページを更新します

 頭の中の4つのメニューlayout / index.vue：

 

 データ部分：

data（）{ 
  return { 
    index： '1'、//デフォルトの
    エントリはホームページです// activeIndex2： '1'、
  } 
}、

計算された属性部分：

計算：{ 
  activeIndex2（）{ 
    // console.info（this。$ route.path.split（
    '/'））//ページを更新した後、ヘッドを動的に変更し、ルートに従ってメニューを選択します
    if（this。 $ route.path.split（ '/'）[1] == 'dashboard'）{ 
      //インデックスの動的な変更。これにより、更新後のサイドバーのルートは常にヘッドのルートと一致します。それ以外の場合は毎回データのインデックスのデフォルト値を「1」に設定したため、サイドバーが更新され、デフォルトでホームページになります
      。this.index= '1' 
      return '1' 
    } 
    if（this。$ route.path.split （ '/'）[1] == 'farmManage'）{ 
      this.index = '3' 
      return '3' 
    } 
    if（this。$ route.path.split（ '/'）[1] == 'farmProduce' ）{ 
      this.index = '4' 
      return '4' 
    } 
    if（this。$ route.path.split（ '/ '）[1] ==' farmLab '）{ 
      this.index =' 5'return 
      '5'
    }
  } 
}、

Sidebar / index.vue：

 データ部分：

import {mapGetters} from'vuex ' 
// import Logo from' ./ Logo ' 
import SidebarItem from' ./ SidebarItem ' 
import variable from'@/styles/variables.scss ' 
import Hamburger from '@ / components / Hamburger'

export default { 
  props：{ 
    index：{ 
      type：String、
      default： '1' 
    } 
  }、
  components：{SidebarItem、Hamburger}、
    calculated 
  ：{ ... mapGetters（[ 
      'permission_routes'、
      'sidebar' 
    ]）、
    activeMenu（ ）{ 
      const route = this。$ route 
      const {meta、path} = route 
      //パスを設定すると、サイドバーに設定したパスが強調表示されます
      if（meta.activeMenu）{ 
        return meta.activeMenu 
      } 
      return path 
    }、
  }、
  watch ：{ 
    index（val）{ 
      // console.log （val ）
      var obj = this.permission_routes.filter（item => { 
        return item.meta && item.meta.index == val; 
      }）
      this。$ router.replace（obj && obj [0] .path）
    } 
  }、
}