Beispielcode mit Vue-Router in HTML

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

Artikel empfehlen

Einführung in das Beispiel zur Erstellung eines einfachen HTML-Webformulars

<input> wird zum Sammeln von Benutzerinforma...

Konfigurationsskript für den automatischen Ausgleich von Nginx-Cache-Dateien und dynamischen Dateien

nginx Nginx (Engine x) ist ein leistungsstarker H...

Natives JS zum Erzielen eines Schiebeknopfeffekts

Der spezifische Code des mit Js erstellten Schieb...

Übung zum Hochladen von Element-Avataren

Dieser Artikel verwendet die offizielle Element-W...

So führen Sie SCSS in ein React-Projekt ein

Laden Sie zuerst die Abhängigkeiten herunter Garn...

Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor

1. Übersicht mysql-monitor MySQL-Überwachungstool...

So überprüfen Sie die Version des Kali Linux-Systems

1. Überprüfen Sie die Kali-Linux-Systemversion Be...

Webdesigner sollten Webseiten unter drei Aspekten optimieren

<br />Mit der zunehmenden Bandbreite werden ...

MySQL Server IO 100 % Analyse- und Optimierungslösung

Vorwort Während des Stresstests besteht das unmit...

Detaillierter Prozess zur Verwendung von VMware zum Testen des PXE-Batchinstallationsservers

Inhaltsverzeichnis 1. Vorbereitung 1. Bereiten Si...

HTML-Code für Multiheader-Tabellen

1. Code der Multiheader-Tabelle Code kopieren Der ...

Detaillierte Erklärung der berechneten Eigenschaften, der Überwachungseigenschaften und des Lebenszyklus in Vue.js

Inhaltsverzeichnis Vorwort Berechnete Eigenschaft...

Lösung für den Fehler „Mehrere Primärschlüssel definiert“ in MySQL

Es gibt zwei Möglichkeiten, einen Primärschlüssel...

Detaillierte Erklärung der Verwendung des Linux-Befehls lsof

lsof (List Open Files) ist ein Tool zum Anzeigen ...

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Frage Nach dem Nginx-Reverse-Proxy erhält die Tom...