Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Routenplanung

vue-router4 behält den Großteil der API unverändert bei, sodass wir uns nur auf die Änderungen konzentrieren müssen.

Installieren

Garn fügt Vue-Router hinzu@4

Einführung

cdn

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script>

verwenden

router.js

importiere { createRouter, createWebHistory} von "vue-router";

Home aus "./views/Home.vue" importieren;

const Routen = [
  { Pfad: "/", Komponente: Home },
  { Pfad: "/about", Komponente: () => import("./views/About.vue") }
];

const router = createRouter({
  Verlauf: createWebHistory(),
  Routen
});

Standardrouter exportieren;

Haupt-JS

importiere { createApp } von "vue";
App aus "./App.vue" importieren;
Router aus "./router" importieren;

const app = erstelleApp(App);
app.use(router);
app.mount("#app");

App.vue

<Vorlage>
  <h1>Hallo App!</h1>
  <p>
    <router-link to="/">Zur Startseite</router-link>
    <router-link to="/about">Gehe zu „Info“</router-link>
  </p>
  <Router-Ansicht></Router-Ansicht>
</Vorlage>

<Skript>
Standard exportieren {};
</Skript>

Ein kleiner Tipp

Wenn Ihre App.vue-Vorlage nur <router-view></router-view> hat, können Sie <router-view> direkt in index.html einfügen.

Zum Beispiel:

Hauptseite

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" rel="externes nofollow" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <title>Vite-App</title>
  </Kopf>
  <Text>
    <div id="app">
      <Router-Ansicht></Router-Ansicht>
    </div>
    <script Typ="Modul" src="/src/main.js"></script>
  </body>
</html>

Entfernen Sie dann App.vue in main.js

Haupt-JS

importiere { createApp } von "vue";
// App aus "./App.vue" importieren;
Router aus "./router" importieren;

// const app = erstelleApp(App);
const app = createApp({});
app.use(router);
app.mount("#app");

Beenden! 😀Bequem und einfach zu bedienen

Zusammenfassen

Dies ist das Ende dieses Artikels über Vue3 mit Routing VueRouter4. Weitere relevante Inhalte über Vue3 mit Routing VueRouter4 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4
Detaillierte Erklärung zur Verwendung von Router-View-Komponenten in Vue
Detaillierte Erklärung zur Installation und Verwendung von Vue-Router
Führen Sie die folgenden Schritte aus, um Vue-Router in Vue3 zu verwenden
So verwenden Sie das Vue-Router-Routing
Wissen Sie, wie man den Router in vue3.0 verwendet?

<<: Detailliertes Beispiel für die Bereitstellung der dynamischen und statischen Trennung von Nginx+Apache

>>: Eine kurze Einführung in die MySQL MyCat-Middleware

Zusammenfassung der Lösungen für allgemeine Linux-Probleme

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Routenplanung

Installieren

verwenden

Ein kleiner Tipp

Zusammenfassen

Zusammenfassung der Lösungen für allgemeine Linux-Probleme

Detaillierte Erklärung der MySQL Truncate-Verwendung

Die spezifische Verwendung von CSS-Attributen zur Optimierung der Frontend-Seitendarstellung wird sich ändern

So implementieren Sie den neuen Operator von JavaScript selbst

JavaScript+html zur Implementierung der Sliding-Verifizierung auf Front-End-Seiten (2)

Detaillierte Erklärung der Beziehung zwischen React und Redux

VirtualBox installiert die virtuelle Maschine CentOS7 und Erweiterungstools (Bild und Text)

Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und eine kurze Diskussion über Event Loop

Verwendung des Linux-Befehls „userdel“

Vue implementiert Beispielcode für Links- und Rechtsgleiteffekte

Artikel empfehlen

Schritte zum Initialisieren des Passworts nach der ersten erfolgreichen Installation von MySQL

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

So geben Sie Speicherplatz unter CentOS 6 oder CentOS 7 frei

Die Umsetzung von Youdas neuem Petite-Vue

Detaillierte Erläuterung der Nginx-Standortkonfiguration (Standortübereinstimmungsreihenfolge)

So kennzeichnen Sie die Quelle und Herkunft von CSS3-Zitaten

Eine kurze Zusammenfassung meiner Erfahrungen beim Schreiben von HTML-Seiten

Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren

UTF-8- und GB2312-Webkodierung

Es gibt eine zusätzliche leere Zeile, nachdem die HTML-Seite Include verwendet, um die PHP-Datei zu importieren

Natives JS zur Implementierung eines Klickzahlenspiels

So stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit

FTP-Remoteverbindung zu Linux über SSH

Designtheorie: Warum suchen wir am falschen Ort?

So setzen Sie das Root-Passwort in Linux mysql-5.6 zurück