So erstellen Sie eine neue Seitenanzeige im Vue-Layout

Mit der Popularität des Vue-Frameworks beginnen immer mehr Webentwickler, es zur Entwicklung umfassender Webanwendungen zu nutzen. Auch die Dokumentation und Community von Vue entwickeln sich ständig weiter, um den sich ändernden Bedürfnissen der Vue-Benutzer gerecht zu werden. Die häufigste Frage für diejenigen, die ein vollständiges Layout in Vue implementieren möchten, ist jedoch, wie die neue Seite im Layout angezeigt wird. Wenn dieses Problem auch bei Ihnen auftritt, machen Sie sich keine Sorgen. In diesem Artikel werden einige Methoden zur Lösung vorgestellt.

Vue.js verwendet viele Konzepte, einschließlich Komponenten, Vorlagen und Routing. Diese Konzepte machen die Vue-Entwicklung sehr flexibel und einfach zu warten. Für das Seitenlayout stellt Vue das Konzeptlayout bereit. Layout ist eine Komponente, die zum Definieren des Seitenlayouts verwendet wird, einschließlich der Kopfzeile, der Seitenleiste, des unteren Bereichs und des Hauptinhaltsbereichs. In Vue befindet sich ein Layout normalerweise in der App.vue-Komponente oder einer ähnlichen Stammkomponente und enthält andere untergeordnete Komponenten.

Wenn wir in herkömmlichen Webanwendungen auf einen Link klicken oder ein Formular absenden, stellt der Server eine neue Seite bereit. Aber in Vue verwenden wir normalerweise einen Vue-Router. Vue Router ist ein Tool, das die Definition aller möglichen Pfade in einer Anwendung und der diesen Pfaden entsprechenden Komponenten ermöglicht. Das bedeutet, dass wir Vue Router nutzen können, um jede Komponente in der VUE-Anwendung zu öffnen, anstatt nur eine neue HTML-Seite zu laden.

Hier sind einige Vue-Router-Methoden zum Öffnen neuer Komponenten:

1. router.push()

router.push()-Methode ermöglicht uns den Übergang von einer Komponente zu einer anderen, ähnlich wie beim Klicken auf einen Link. Zum Beispiel:

this.$router.push('/dashboard');

Dies navigiert zur Komponente mit dem Namen „Dashboard“. Mit der Methode

2. router.replace()

router.replace() können wir Datensätze im aktuellen Routenverlauf ersetzen, ohne neue Verlaufselemente hinzuzufügen. Beispiel:

this.$router.replace('/dashboard');

Dies navigiert zur Komponente mit dem Namen „Dashboard“ und ersetzt das aktuelle Routenverlaufselement. Mit der Methode

3. router.go()

router.go() können wir uns im Verlauf um eine bestimmte Anzahl von Schritten vorwärts oder rückwärts bewegen. Zum Beispiel:

this.$router.go(-1);

Das wird einen Schritt zurück in die Geschichte machen.

Verwenden Sie diese Methoden im Vue-Router, um neue Komponenten im Layout zu öffnen. Wir können in der Layout-Komponente eine Routenansicht definieren, um die Komponente in der Layout-Ansicht anzuzeigen. Mit diesem Ansatz stellen wir sicher, dass jede neue Seite innerhalb des Layouts geöffnet wird.

Hier ist der Code für eine Beispiel-.vue-Datei, die die Layoutkomponente, die Hauptansicht und die Routenansicht enthält:

<template>
  <div id="app">
    <layout>
      <router-view />
    </layout>
  </div>
</template>

<script>
import Layout from './components/Layout.vue';

export default {
  components: {
    Layout
  },
};
</script>

Im obigen Code haben wir zuerst unsere Layoutkomponente importiert und sie dann in der Vorlage definiert. Wir verwenden in unserer Definition auch Routenansichten. Diese Ansicht wird innerhalb unserer Komponente geöffnet.

Um den Pfad im Router klarer zu definieren, müssen wir den folgenden Code in das Router-Objekt einfügen:

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/dashboard',
      component: Dashboard
    }
  ]
});

Oben haben wir zwei Pfade definiert, einer ist / und der andere ist /dashboard. Wenn ein Benutzer auf eine URL zugreift, öffnet der Router entweder die Home-Komponente oder die Dashboard-Komponente, abhängig von der URL, auf die der Benutzer zugegriffen hat.

In einer vollständigen Vue-Anwendung können dem Layout wie oben weitere Komponenten hinzugefügt werden.

Zusammenfassung

In Vue JS ist die Layout-Komponente eine Methode, um Elemente auf einer Webseite sinnvoll zu verteilen. Mit Methoden im Vue-Router können wir neue Komponenten innerhalb der Layout-Komponente öffnen, anstatt sie auf separaten Seiten zu laden. Dies kann den Seitenwechsel erheblich beschleunigen und Webanwendungen ein besseres Benutzererlebnis bieten. Nachdem Sie die oben genannten Probleme gelöst haben, glaube ich, dass es Ihnen dabei helfen wird, schnell qualitativ hochwertige Vue-Anwendungen zu entwickeln.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine neue Seitenanzeige im Vue-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!