Detaillierte Erklärung zur Verwendung von Router-View-Komponenten in Vue

Wenn Sie ein Vue-Projekt entwickeln, müssen Sie häufig eine Seite implementieren, die zwischen der Anzeige verschiedener Komponentenseiten wechseln kann.

Beispiel: In der folgenden Abbildung können Sie durch Klicken auf verschiedene Komponenten in der Seitenleiste zu verschiedenen Komponentenseiten weitergeleitet werden, während die Seitenleiste und der obere Teil unverändert bleiben und nur die Komponentenseite gewechselt wird .

Zu diesem Zeitpunkt müssen wir die Router-Ansichtskomponente (auch Routing-Platzhalter genannt) in der Route verwenden

Zuerst kommen wir zu der Seite, auf der wir zwischen verschiedenen Komponentenseiten wechseln und die Router-Ansichtskomponente dort hinzufügen müssen, wo wir sie benötigen.
Startseite.vue

<Vorlage>
<!--Kopfbereich-->
    <el-header>
      <div>
        <img class="shop" src="../assets/img/shop.png" alt="">
        <span>E-Commerce-Backend-Verwaltungssystem</span>
      </div>
      <el-button type="info" @click="logout">Abmelden</el-button>
    </el-header>
    <el-container>
<!--Seitenleiste-->
	<!--Dies ist zum besseren Verständnis vereinfacht. Es bedeutet, dass Sie auf verschiedene Optionen in der Seitenleiste klicken, um zur Route zu springen-->
    <router-link :to="/roles"></router-link><!--Rollenliste-->
    <router-link :to="/rights"></router-link><!--Berechtigungsliste-->
<!--Routenplatzhalter-->
    <Router-Ansicht></Router-Ansicht>
</Vorlage>

Die der Rollenliste entsprechende Route ist /roles, und die der Berechtigungsliste entsprechende Route ist /rights.
Konfigurieren Sie die Route, nachdem Sie die Router-View-Komponente hinzugefügt haben. Nachfolgend sehen Sie die Routenkonfiguration

index.js

{
      Pfad: „/home“,
      Komponente:Home,
      // Weiterleitung zur Rollenliste redirect:'/roles',
      Kinder:[
        {
          Pfad: '/Rechte',
          Komponente:Rechte
        },
        {
          Pfad: '/Rollen',
          Komponente:Rollen
        } 
      ]
    }

Auf diese Weise haben wir die Verwendung der Router-View-Komponente realisiert!

Dies ist das Ende dieses Artikels über die detaillierte Verwendung der Router-View-Komponente in Vue. Weitere relevante Inhalte zur Verwendung der Vue-Router-View-Komponente finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!