Installations- und Konfigurationsmethode des Vue-Route-Routing-Managements

einführen

Vue Router ist der offizielle Routing-Manager für Vue.js Es ist tief in den Kern von Vue.js integriert und erleichtert die Erstellung von Single-Page-Anwendungen. Zu den enthaltenen Funktionen gehören:

• Verschachtelte Routen/Ansichtstabellen
• Modulare, komponentenbasierte Routing-Konfiguration
• Routenparameter, Abfragen, Platzhalter
• Zeigen Sie Übergangseffekte basierend auf dem Vue.js-Übergangssystem an
• Feinkörnige Navigationssteuerung
• Links mit automatisch aktivierten CSS-Klassen
• HTML5-Verlaufsmodus oder Hash-Modus, automatisch heruntergestuft in IE9
• Benutzerdefiniertes Bildlaufleistenverhalten

Installieren

Installationsbefehle

npm installiere vue-router --save

Wenn Sie es in einem modularen Projekt verwenden, müssen Sie die Routing-Funktion explizit über Vue.use() installieren:

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren

Vue.use(VueRouter)

Modularer Einsatz

Als wir zuvor das Gerüst vue-cli zum Erstellen eines Projekts verwendet haben, wurde router tatsächlich konfiguriert. Nachdem das Projekt erstellt wurde, gab es im Stammverzeichnis des Projekts einen router -Ordner und unter router eine Datei index.js mit folgendem Inhalt:

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;
Home aus "../views/Home.vue" importieren;

// 1. Wenn wir andere Plug-Ins verwenden, müssen wir Vue.use verwenden, um das Plug-In zu installieren Vue.use(VueRouter);

// 2. Routen definieren, jede Route sollte einer Komponente zugeordnet sein const routes = [
  {
    Weg: "/",
    Name: "Home",
    Komponente: Home,
  },
  {
    Pfad: "/about",
    Name: "Über",
    Komponente: Über
  },
];

// 3. Erstellen Sie eine Routerinstanz const router = new VueRouter({
  //Konfiguriere die Anwendungsbeziehung zwischen Routen und Komponentenrouten, // (Abkürzung) entspricht Routen: Routen
});

// 4. Exportieren Sie das Routerobjekt und verweisen Sie dann in main.js auf „export default router“.

Diese Datei dient speziell zum Konfigurieren des Routings. Nachdem wir router Objekt exportiert haben, können wir es schließlich in main.js des Projekts referenzieren.

importiere Vue von „vue“;
App aus "./App.vue" importieren;
Router aus "./router" importieren;

Vue.config.productionTip = falsch;

neuer Vue({
  Router, // Fügen Sie der Vue-Instanz das Router-Objekt hinzu, und Sie können das Routing-Rendering verwenden: (h) => h(App),
}).$mount("#app");

Unsere beiden Komponentencodes About und Home lauten wie folgt:

// Über.vue
<Vorlage>
  <div Klasse="Über">
    <h1>Über</h1>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Über"
}
</Skript>

<Stilbereich>
</Stil>

// Startseite.vue
<Vorlage>
  <div Klasse="Startseite">
    <h1>Startseite</h1>
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "Home",
};
</Skript>

<Stilbereich>
</Stil>

Abschließend schreiben wir folgenden Code in App.vue :

Vorlage>
  <div id="app">
    <router-link to="/">Zuhause</router-link>
    <router-link to="/about">Über</router-link>
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<style lang="scss">
</Stil>

Verwenden Sie <router-link> , um den Link zu laden, und verwenden Sie dann to den Link darzustellen, zu dem gesprungen werden soll. Schließlich wird <router-link> in ein <a> -Tag umgewandelt.
<router-view> ist der Ausgang der Route, d. h. der Code unter der entsprechenden url wird an dieser Stelle gerendert.

HTML5-Verlaufsmodus

Aber wenn wir das Programm starten und auf die Seite zugreifen, wird # in url -Adresse angezeigt

Dies liegt daran, dass vue-router standardmäßig den hash Modus verwendet, d. h. den hash der URL verwendet, um eine vollständige URL zu simulieren, sodass die Seite bei einer Änderung URL nicht neu geladen wird.
Wenn wir den hässlichen hash nicht wollen, können wir den history des Routers verwenden, der history.pushState API voll ausnutzt, um URL Sprung abzuschließen, ohne die Seite neu zu laden.

const router = neuer VueRouter({
  Modus: "Verlauf",
  Routen: [...]
})

Wir müssen lediglich mode zum history in index.js im router -Ordner hinzufügen und dann http://localhost:8080/ ohne das # -Zeichen erneut aufrufen.

Hinweis: Der history erfordert auch Unterstützung der Hintergrundkonfiguration. Da es sich bei unserer Anwendung um eine Single-Page-Client-Anwendung handelt, wird bei einer falschen Backend-Konfiguration und dem direkten Zugriff des Benutzers auf andere url Adressen im Browser eine 404-Fehlermeldung zurückgegeben, was nicht gut ist.

Daher müssen Sie eine Kandidatenressource auf dem Server hinzufügen, um alle Situationen abzudecken: Wenn URL keiner statischen Ressource entspricht, sollte sie dieselbe index.html -Seite zurückgeben, also die Seite, von der Ihre app abhängt.

Dies ist das Ende dieses Artikels über die Installation und Konfiguration des Vue-Route-Routing-Managements. Weitere relevante Inhalte zur Installation und Konfiguration von Vue Route 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!