Vue+Router+Element zur Implementierung einer einfachen Navigationsleiste

//config.js-Seite //Navigationsleiste importiere Home von '../components/home'
//Homepageimport Index von '../components/index'
//Videoplattform importiert Vid von '../components/vid_terrace'
//Andere Seiten importieren Rests aus '../components/rests'
 
 
Standard exportieren {
  Routen:[
    {
      Pfad: „/home“,
      Name: 'Heimat',
      Komponente: Home,
    },
    {
      /**
       * Home konfiguriert die Navigationsleiste. Diese muss konfiguriert werden, sonst erfolgt ein Sprung auf eine neue Seite. * /home/index
       */
 
      Pfad: '/home',
      Name: 'Heimat',
      Komponente: Home,
      Umleitung: "Index",
      Kinder: [
        {
          Name: "Index",
          Pfad: '/index',
          Komponente: Index
        },
        {
          Name: "vid",
          Pfad: '/vid',
          Komponente: Vid
        },
        {
          Name: 'Ruhen',
          Pfad: '/rests',
          Komponente: Pausen
        }
      ]
    }
  ],
  // Entfernen Sie die Vue-Adresse#
  Modus: „Verlauf“
}

importiere VueRouter von „vue-router“;
importiere Vue von „vue“;
Konfiguration aus „./config“ importieren;
 
Vue.use(VueRouter);
 
let router = neuer VueRouter(Konfiguration);
Standardrouter exportieren;

importiere Vue von „vue“;
App aus „./App“ importieren;
 
 
// Element-ui importieren
importiere ElementUI von „element-ui“;
importiere „element-ui/lib/theme-chalk/index.css“;
 
//Importiere ./router/index Dateiimportrouter von "./router/index";
Vue.config.productionTip = falsch
Vue.use(ElementUI);
neuer Vue({
 
  el: '#app',
  rendern: h => h(App),
  Router
})

<Vorlage>
  <div id="app">
    <!-- Die Komponente ist eine Funktionskomponente, die die Ansichtskomponente entsprechend dem Rendering-Pfad rendert. -->
      <Router-Ansicht></Router-Ansicht>
  </div>
 
</Vorlage>
 
<Skript>
 
Standard exportieren {
  Name: "App",
  Komponenten:
   
  }
}
</Skript>
 
<Stil>
#app {
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

<Vorlage>
<!-- Navigationsleiste -->
  <div>
    <el-Menü
        :default-active="dieser.$route.pfad"
        Klasse="el-menu-demo"
        Modus="horizontal"
        @select="Auswahlgriff"
        Router
        Hintergrundfarbe = "#545c64"
        Textfarbe = "fff"
        aktiver-text-color="#ffd04b">
 
      <el-menu-item v-for="(tit,i) in titleList" :key="i" :index="tit.name">
        <template>{{ tit.navItem }}</template>
      </el-Menüelement>
 
    </el-Menü>
 
    <el-main class="detaillierter-Inhalt">
      <Router-Ansicht />
    </el-main>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 
    Daten() {
      zurückkehren {
        aktiverIndex: '1',
        activeIndex2: '1',
        Titelliste:[
          {name:'index', navItem:'Homepage'},
          {name:'vid',navItem:'Videoplattform'},
          {name:'reste',navItem:'andere'},
        ]
 
      }
    },
    Methoden: {
      handleSelect(Schlüssel, Schlüsselpfad) {
        console.log(Schlüssel, Schlüsselpfad);
      }
    }
  }
</Skript>
 
<Stilbereich>
 
</Stil>