Führen Sie die folgenden Schritte aus, um Vue-Router in Vue3 zu verwenden

Vorwort

Die Verwaltung des Routings ist eine wesentliche Funktion für die meisten Single-Page-Anwendungen. Da sich die neue Version von Vue Router im Alpha-Stadium befindet, können wir bereits sehen, wie sie in der nächsten Version von Vue funktioniert.

Viele der Änderungen in Vue3 werden die Art und Weise, wie wir auf Plugins und Bibliotheken zugreifen, leicht verändern, und dazu gehört auch Vue Router.

1. Schritt 1: Vue-Router installieren

npm installiere [email protected]

2. Schritt 2: main.js

Vergleichen wir zunächst den Unterschied zwischen main.js in vue2 und vue3: (das erste ist vue2, das zweite ist vue3)

Es ist deutlich zu erkennen, dass das Vue-Objekt, das wir häufig in vue2 verwenden, in vue3 aufgrund der direkten Verwendung der Methode createApp „verschwunden“ ist, aber tatsächlich ist die von der Methode createApp erstellte App ein Vue-Objekt. Das in vue2 häufig verwendete Vue.use() kann in vue3 für den normalen Gebrauch durch app.use() ersetzt werden; verwenden Sie in der Datei main.js von vue3 vue-router, um den Router direkt mit der Methode app.use() aufzurufen.

Hinweis: Importieren Sie den von der Routendatei exportierten Routennamen aus „entsprechend dem relativen Pfad der Routendatei“. Das Projektverzeichnis lautet wie folgt (dasselbe für vue2 und vue3):

3. Routing-Datei

importiere { createRouter, createWebHashHistory } von "vue-router"

const Routen = [
    {
        Weg: '/',
        Komponente: () => import('@/Seiten')             
    },
    {
        Pfad: '/test1',
        Name: "test1",
        Komponente: () => import('@/pages/test1')   
    },
    {
        Pfad: '/test2',
        Name: "test2",
        Komponente: () => import('@/pages/test2')   
    },
]
exportiere const router = createRouter({
  Verlauf: createWebHashHistory(),
  Routen: Routen
})

Standardrouter exportieren

4. app.vue

<Vorlage>
  <Router-Ansicht></Router-Ansicht>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "App",
  Komponenten:
  }
}
</Skript>

<Stil>
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

4. Verwenden (z. B. Springen)

Wir führen useRoute und useRouter dort ein, wo Routing erforderlich ist (entspricht $route und $router in vue2).

<Skript>
importiere { useRoute, useRouter } von 'vue-router'
Standard exportieren {
  aufstellen () {
    const route = useRoute()
    const router = useRouter()
    zurückkehren {}
  },
}

Beispiel: Seitensprung

<Vorlage>
  <h1>Ich bin test1</h1>
  <button @click="zuTest2">zuTest2</button>
</Vorlage>
<Skript>
importiere { useRouter } von 'vue-router'
Standard exportieren {
  aufstellen () {
    const router = useRouter()
    const toTest2= (() => {
      router.push("./test2")
    })
    zurückkehren {
      zuTest2
    }
  },
}
</Skript>
<Stilbereich>
</Stil>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Vue3 mit Vue-Router. Weitere relevante Inhalte zu Vue3 mit Vue-Router 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!