Beispielcode mit Vue-Router in HTML

Einführung in Vue und Vue-Router

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

Vollständiges Beispiel

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</Kopf>
<Text>
    <div id="app">
        <h1>Hallo!</h1>
        <p>
          <!-- Verwenden Sie zur Navigation die Router-Link-Komponente. -->
          <!-- Geben Sie den Link an, indem Sie das Attribut „to“ übergeben. -->
          <!-- <router-link> wird standardmäßig als `<a>`-Tag gerendert -->
          <router-link to="/hash1">Wechseln Sie zu com1</router-link>
          <router-link to="/hash2">Wechseln Sie zu com2</router-link>
        </p>
        <!-- Routing-Ausgang -->
        <!-- Komponenten, die mit der Route übereinstimmen, werden hier gerendert-->
        <Router-Ansicht></Router-Ansicht>
        <!-- Andere Attribute auf Router-Link: -->
        <!-- Wenn das Ersetzungsattribut gesetzt ist, wird beim Klicken router.replace() statt router.push() aufgerufen.
            Nach der Navigation bleibt kein Verlaufsdatensatz übrig. -->
        <!-- <router-link :to="{ path: '/abc'}" replace></router-link> -->
        <!-- Manchmal möchten Sie, dass <router-link> in eine Art Tag umgewandelt wird, beispielsweise <li>. Daher verwenden wir die Tag-Prop-Klasse, um das Tag anzugeben, und es wird weiterhin auf Klicks warten und die Navigation auslösen. -->
        <!-- <router-link to="/foo" tag="li">foo</router-link> -->
        <!-- active-class legt das CSS fest, das bei Aktivierung des Links verwendet wird -->
        <!-- event deklariert ein Ereignis, das zum Auslösen einer Navigation verwendet werden kann. Kann eine Zeichenfolge oder ein Array mit Zeichenfolgen sein. -->
    </div>
</body>
<Skript>
    // 1. (Routing-)Komponenten definieren.
    const com1 = { Vorlage: '<div>Route 1</div>' }
    const com2 = { Vorlage: '<div>Route 2</div>' }
    
    // 2. Routen definieren // Jede Route sollte einer Komponente zugeordnet sein. Wobei „Komponente“ durch Vue.extend() erweitert werden kann
    // Der zu erstellende Komponentenkonstruktor oder einfach ein Komponentenkonfigurationsobjekt.
    const Routen = [
        { Pfad: '/hash1', Komponente: com1 },
        { Pfad: '/hash2', Komponente: com2 }
    ]
    
    // 3. Erstellen Sie eine Routerinstanz und übergeben Sie die Konfiguration von „Routen“ const router = new VueRouter({
        Routen // (Abkürzung) entspricht Routen: Routen
    })
    
    // 4. Erstellen und mounten Sie die Root-Instanz.
    // Routen über Router-Konfigurationsparameter einfügen, sodass die gesamte Anwendung über Routing-Funktionalität verfügt const app = new Vue({
        Router
    }).$mount('#app');//el ist automatisches Mounten, mount ist manuelles Mounten (Verzögerung)
    
</Skript>
</html>

Dies ist das Ende dieses Artikels über den Beispielcode zur Verwendung von Vue-Router in HTML. Weitere relevante Inhalte zur Verwendung von Vue-Router in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen

>>: Implementierung von Single-Div-Zeichentechniken in CSS