Enrutamiento del encabezado del proyecto Vue, problema de enlace de enrutamiento de la barra lateral

Efecto de menú: cuatro menús grandes en la cabeza, haga clic en cada menú en la cabeza, cambie la barra de menú izquierda correspondientemente, haga clic en el navegador para actualizar, actualice la página manteniendo el estado de cada menú sin cambios

 El diseño de cuatro menús / index.vue en el encabezado:

 

 parte de datos:

data () { 
  return { 
    index: '1', // La 
    entrada predeterminada es la página de inicio // activeIndex2: '1', 
  } 
},

Parte de atributo calculada:

computed: { 
  activeIndex2 () { 
    //console.info(this.$route.path.split('/ ')) 
    // Después de actualizar la página, cambia dinámicamente el encabezado y selecciona el menú de acuerdo con la ruta 
    if (this. $ route.path.split ('/') [1] == 'dashboard') { 
      // Cambio dinámico de índice, de modo que la ruta de la barra lateral después de la actualización sea siempre consistente con la ruta de la cabeza, de lo contrario cada vez la barra lateral se actualiza, será la página de inicio por defecto Barra lateral, porque establecemos el valor predeterminado del índice en los datos es "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 '
    } 
  } 
},

Barra lateral / index.vue:

 Parte de datos:

importar {mapGetters} de 'vuex' 
// importar Logo de './Logo' 
importar SidebarItem de './SidebarItem' 
importar variables de '@ / styles / variables.scss' 
importar Hamburger desde '@ / components / Hamburger'

exportar { 
  props: { 
    index: { 
      type: String, 
      default: '1' 
    } 
  }, 
  componentes: {SidebarItem, Hamburger}, 
  calculado: { 
    ... mapGetters ([ 
      ' allow_routes ', 
      'sidebar' 
    ]), 
    activeMenu ( ) { 
      const route = this. $ route 
      const {meta, path} = route 
      // si se establece una ruta, la barra lateral resaltará la ruta que estableciste 
      si (meta.activeMenu) { 
        return meta.activeMenu 
      } 
      return path 
    }, 
  }, 
  mira : { 
    índice (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) 
    } 
  }, 
}