VueJS - Subnav-Komponenten außerhalb der Router-Ansicht?

Question

Ich habe ein Website-Layout mit Bootstrap wie folgt (und es muss so bleiben):

• Navigations Spalte auf der linken Seite:

  <div class='row'> 
      <div class='col-md-2'> 
      <main-nav-component></main-nav-component> 
      <sub-nav-component></sub-nav-component> <!-- Problem Area --> 
      </div> 
  
      <div class='col-md-10'> 
      <router-view></router-view> <!-- MAIN CONTENT SECTION --> 
      </div> 
  </div> 
  

  Das ist mir zwei Spalten über die gesamte Website gibt

• A „contents“ Spalte auf der rechten

verschiedenen Seiten (aber nicht alle), die im Hauptinhaltsbereich angezeigt werden (über den router-view) müssen auch ihr eigenes Subnav unterhalb des Hauptnavs anzeigen. Es gibt verschiedene Sub-Navs für verschiedene Seiten und ich kann nicht herausfinden, wie man das in VueJS macht. Irgendwelche Ideen?

Answer 1

Es gibt ein paar Möglichkeiten, dies zu tun. Am einfachsten ist es, die Subheader-nav-Komponenten in die Komponenten selbst aufzunehmen, aber Sie haben gesagt, dass sich das Obige nicht ändern wird. Stattdessen müssen Sie Daten an die Sub-nav-Komponente übergeben, um sie darüber zu informieren, was gerendert werden soll. Eine Möglichkeit besteht darin, die Route zu verwenden.

Zum Beispiel mussten wir in einer Anwendung ein bestimmtes Subnav für eine Gruppe von Seiten haben. Wir haben eine 'Zone' in Meta deklariert, dann lesen wir in der Header-Komponente die Zone und zeigen das richtige Subnav dafür an.

In dem router.js:

{ 
    path: '/profile/user', 
    name: 'Profile', 
    component: Profile, 
    meta: { zone: 'profile'} 
}, 

Auf der Header-Komponente:

computed: { 
    zone(){ 
     return this.$store.state.route.meta.zone 
    }, 

Und in dem HTML-Code der Header-Komponente:

<profile-nav v-if="zone == 'profile'"></profile-nav>