vue项目头部路由，侧边栏路由联动问题

菜单效果：头部四个大的菜单，点击头部每个菜单，对应切换左侧菜单栏，点击浏览器刷新，刷新页面的同时保持各个菜单的状态不变

 头部四个菜单layout/index.vue：

 

 data部分：

data() {
  return {
    index: '1',  //默认进去为首页
    //activeIndex2: '1',
  }
},

计算属性部分：

computed: {
  activeIndex2() {
    //console.info(this.$route.path.split('/'))
    // 刷新页面后根据路由动态改变头部选中菜单
    if (this.$route.path.split('/')[1] == 'dashboard') {
      //动态改变index,使刷新后侧边栏的路由始终和头部路由保持一致，否则每次刷新侧边栏默认会是首页对应的侧边栏，因为我们在data中设置index的默认值是"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 variables from '@/styles/variables.scss'
import Hamburger from '@/components/Hamburger'

export default {
  props: {
    index: {
      type: String,
      default: '1'
    }
  },
  components: { SidebarItem,Hamburger },
  computed: {
    ...mapGetters([
      'permission_routes',
      'sidebar'
    ]),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      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)
    }
  },
}