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

Mehrere Implementierungsmethoden sowie Vor- und Nachteile der SQL-Paging-Abfrage in MySQL

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

Dieser Artikel beschreibt anhand von Beispielen d...

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

Routenplanung

Installieren

verwenden

Ein kleiner Tipp

Zusammenfassen

Mehrere Implementierungsmethoden sowie Vor- und Nachteile der SQL-Paging-Abfrage in MySQL

So schreiben Sie den Stil einer CSS3-Tianzi-Rasterliste

Vollständige Schritte zur Verwendung von Nginx+Tomcat zum Lastenausgleich unter Windows

Ein Artikel zum Verständnis der Verwendung von Proxys in JavaScript

Website-Design-Erfahrung Zusammenfassung der häufigsten Fehler beim Erstellen von Websites

Online- und Offlineinstallation von Docker und allgemeine Befehlsvorgänge

Implementierung von Linux-Dateisystemvorgängen

Einige Verbesserungen in MySQL 8.0.24 Release Note

Beispiel für eine Formatierungsmethode für Datum und Uhrzeit in js

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Artikel empfehlen

So verfolgen Sie Benutzer mit JS

Erläuterung des React+TypeScript-Projektaufbaufalls

So stellen Sie eine Verbindung zum MySQL-Visualisierungstool Navicat her

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Führen Sie die Schritte zum Zurücksetzen des Root-Benutzerkennworts in MySQL8 aus

Erste Schritte mit CSS3-Animation in 10 Minuten

MySQL8.0-Installationsprozess unter Centos7 in VMware Workstation16 und Navicat-Remoteverbindung

Detaillierte Erklärung zur grundlegenden Verwendung des React Native-Scaffoldings

Vue + node realisiert Audioaufzeichnungs- und -wiedergabefunktion

CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

Lösung für Vues Unfähigkeit, Array-Änderungen zu beobachten

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

So verwenden Sie Docker zum lokalen Verpacken und Bereitstellen von Images

Detaillierte Erläuterung des Front-End-Systems von Vue sowie der Trennung von Front-End und Back-End

Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP