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

Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden

Artikel

Zusammenfassung der Fallstricke, die Ihnen bei der Entwicklung von WeChat-Applets möglicherweise noch nicht begegnet sind

Artikel

Beispiele für die korrekte Verwendung von Karten in WeChat-Miniprogrammen

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

Routenplanung

Installieren

verwenden

Ein kleiner Tipp

Zusammenfassen

Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden

Zusammenfassung der Fallstricke, die Ihnen bei der Entwicklung von WeChat-Applets möglicherweise noch nicht begegnet sind

Beispiele für die korrekte Verwendung von Karten in WeChat-Miniprogrammen

Detaillierte Erläuterung der Vue-Lebenszyklusfunktionen

Grundlegende Nutzungsanalyse von Explain, einem magischen Tool zur MySQL-Leistungsoptimierung

Tutorial zum schnellen Bereitstellen von Clickhouse mit Docker-Compose

So verwenden Sie iostat zum Anzeigen der IO-Leistung von Linux-Festplatten

Acht Regeln für effektive Webformulare

Erläuterung der MySQL-Indexoptimierung

Detaillierte Schritte zum Erstellen eines NFS-Dateifreigabeservers unter Linux

Artikel empfehlen

So ändern Sie den Standardspeicherort von Docker-Images (Lösung)

Analysieren Sie die Methode zur Überwachung von Nginx durch Prometheus + Grafana

Eine kurze Einführung in die Basiskomponenten der VUE uni-app

Installations-Tutorial zur MySQL 5.7.17 Zip-Paketversion unter Win10

Allgemeine grundlegende Linux-Befehle und -Verwendung

So verwenden Sie JS WebSocket zur Implementierung eines einfachen Chats

Detailliertes Tutorial zur Installation und Verwendung von Kong API Gateway mit Docker

Eine kurze Analyse der Verwendung von watchEffect in Vue3

Detaillierte Analyse der MySQL-Indizes

So entwerfen Sie MySQL-Statistikdatentabellen

Detaillierte Erklärung der Kernfunktionen und der Ereignisbehandlung von jQuery

Detaillierte Einführung in die Linux-Firewall iptables, Konfigurationsmethode und Fall

So verwalten Sie Benutzer und Gruppen beim Ausführen von Docker

Ein Artikel zeigt Ihnen, wie Sie den Watch-Listener von Vue verwenden

vue.js lädt Bilder entsprechend der Bild-URL herunter