Vue verwendet Element-UI, um die Menünavigation zu implementieren

npm installiere vue-router --save
npm installiere element-ui --save

modul.exporte = {
    lintOnSave: falsch
}

Vue von „vue“ importieren
App aus „./App.vue“ importieren

VueRouter von „vue-router“ importieren
importiere ElementUI von „element-ui“
importiere 'element-ui/lib/theme-chalk/index.css'


Film aus „./components/movie.vue“ importieren
Roman aus „./components/novel.vue“ importieren

Vue.config.productionTip = falsch

Vue.use(VueRouter)
Vue.use(ElementUI);

const Routen = [
  { Pfad: '/Film', Komponente: Film },
  { Pfad: '/Roman', Komponente: Roman }
]

// 3. Erstellen Sie eine Routerinstanz und übergeben Sie die „Routen“-Konfiguration. // Sie können auch andere Konfigurationsparameter übergeben, aber halten wir es vorerst einfach.
const router = neuer VueRouter({
  Modus: 'Verlauf', //h5-Modus Routen // (Abkürzung) entspricht Routen: Routen
})

neuer Vue({
  rendern: h => h(App),
  Router
}).$mount('#app')

<Vorlage>
  <div>    
    Filmseite</div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Film" 
}
</Skript>


<Stilbereich>

</Stil>

<Vorlage>
  <div>
    Romanseite</div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'Roman'  
}
</Skript>
<Stilbereich>

</Stil>

<Vorlage>
  <div id="Navigationsmenü">
    <el-Menü
      :default-active="AktivIndex"
      Klasse="el-menu-demo"
      Modus="horizontal"
      @select="Auswahlgriff"
      Router
    >
      <!-- 
      <el-menu-item index="1">Filme</el-menu-item>
      <el-menu-item index="2">Roman</el-menu-item>
      <el-submenu index="3">
        <template slot="title">Meine Werkbank</template>
        <el-menu-item index="3-1">Option 1</el-menu-item>
        <el-menu-item index="3-2">Option 2</el-menu-item>
        <el-menu-item index="3-3">Option 3</el-menu-item>
        <el-submenu index="3-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="3-4-1">Option 1</el-menu-item>
          <el-menu-item index="3-4-2">Option 2</el-menu-item>
          <el-menu-item index="3-4-3">Option 3</el-menu-item>
        </el-Untermenü>
      </el-Untermenü> 
      -->

      <template v-for="Element in navMenuData">
        <el-menu-item :index="item.index" v-if="!item.child">{{item.name}}</el-menu-item>

        <el-Untermenü :index="Artikel.index" v-if="Artikel.child">
          <template slot="title">{{item.name}}</template>
          <template v-for="Artikel2 in Artikel.child">
            <el-menu-item :index="item2.index">{{item2.name}}</el-menu-item>
          </Vorlage>
        </el-Untermenü>
      </Vorlage>
    </el-Menü>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "NavMenu",
  Daten() {
    zurückkehren {
      activeIndex: "Film",     
      navMenuData:
        { index: "Film", name: "Film" },
        { index: "Roman", name: "Roman" },
        {
          Index: "2",
          Name: "Meine Workbench",
          Kind: [{ index: "2-1", name: "Option 1" },{ index: "2-2", name: "Option 2" },{ index: "2-3", name: "Option 3" }]
        },
       
      ]
    };
  },
  Methoden: {
    handleSelect(Schlüssel, Schlüsselpfad) {
      console.log(Schlüssel, Schlüsselpfad);
    }
  },
  montiert(){         
      Konsole.log(dieser.activeIndex)        
      Konsole.log(dies.$route.path)      
      this.activeIndex = this.$route.path.substring(1,this.$route.path.length);     

  }
};
</Skript>

<Stilbereich>
</Stil>

<Vorlage>
  <div id="app">
    <el-container>
      <el-header>
        <Navigationsmenü></Navigationsmenü>
      </el-header>
      <el-main>
         <Router-Ansicht></Router-Ansicht> <!--Routenausgang-->
      </el-main>
      <el-footer>Fußzeile</el-footer>
    </el-container>
  </div>
</Vorlage>

<Skript>
importiere NavMenu aus "./components/NavMenu.vue";

Standard exportieren {
  Name: "App",
  Komponenten:
    Navigationsmenü
  }
};
</Skript>

<Stilbereich>
.el-Header,
.el-Fußzeile {
  Hintergrundfarbe: #b3c0d1;
  Farbe: #333;
  Textausrichtung: zentriert;
  Höhe: 100px;
  Polsterung: 0px;
}

.el-main {
  Hintergrundfarbe: #e9eef3;
  Farbe: #333;
  Textausrichtung: zentriert;
  Zeilenhöhe: 160px;
}

</Stil>