Heim Web-Frontend js-Tutorial Detaillierte Erläuterung des Single-Page-Routings des Vue-Routers

Detaillierte Erläuterung des Single-Page-Routings des Vue-Routers

Jul 04, 2017 pm 03:04 PM
vue-router 详解 页面

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Vue-Router-Einzelseiten-Routing im Detail vorgestellt. Interessierte Freunde können sich auf

vue beziehen Klassenbibliothek namens vue-router, die für das Single-Page-Routing verwendet wird. Das Routing ist im Allgemeinen in vier Schritte unterteilt:

  • Vorbereiten einer Stammkomponente vue.extend();

  • Vorbereiten einer Vorlage für den Inhalt, der benötigt wird geroutet werden ;

  • Route vorbereiten neuer VueRouter();

  • Zugehörige Routenkarte

  • Start route start (App,'#box'); // Der erste Parameter ist die vorbereitete Stammkomponente und der zweite Parameter ist der Ort, der in der von Ihnen definierten ID gebündelt werden soll

Vue-Router-Download-Adresse auf Github: https://github.com/vuejs/vue-router

Der einfache Code für den Routensprung lautet wie folgt:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <p id="box">
      <ul>
        <li>
          <a v-link="{path:&#39;/home&#39;}">我是第一个a</a>
        </li>
        <li >
          <a v-link="{path:&#39;news&#39;}">我是第二个a</a>
        </li>
      </ul>
      <p>
        <router-view></router-view>
      </p>
    </p>
  </body>
  <script>
    //1.准备一个根组件
    var App=Vue.extend();
    
    //2.Home News 组件准备
    var Home=Vue.extend({
      template:&#39;<h3>我是第一个a的内容页</h3>&#39;
    });
    
    var News=Vue.extend({
      template:&#39;<h3>我是第二个a的内容页</h3>&#39;
    })
    
    //3.准备路由
    var router = new VueRouter();
    
    //4.关联
    
    router.map({
      &#39;home&#39;:{
        component:Home
      },
      &#39;news&#39;:{
        component:News
      }
    })
    
    //5.启动路由
    
    router.start(App,&#39;#box&#39;);
  </script>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Single-Page-Routings des Vue-Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So kopieren Sie eine Seite in Word So kopieren Sie eine Seite in Word Feb 20, 2024 am 10:09 AM

Möchten Sie eine Seite in Microsoft Word kopieren und die Formatierung beibehalten? Dies ist eine kluge Idee, da das Duplizieren von Seiten in Word eine nützliche zeitsparende Technik sein kann, wenn Sie mehrere Kopien eines bestimmten Dokumentlayouts oder -formats erstellen möchten. Diese Anleitung führt Sie Schritt für Schritt durch den Prozess des Kopierens von Seiten in Word, unabhängig davon, ob Sie eine Vorlage erstellen oder eine bestimmte Seite in einem Dokument kopieren. Diese einfachen Anweisungen sollen Ihnen dabei helfen, Ihre Seite einfach neu zu erstellen, ohne bei Null anfangen zu müssen. Warum Seiten in Microsoft Word kopieren? Es gibt mehrere Gründe, warum das Kopieren von Seiten in Word sehr vorteilhaft ist: Wenn Sie ein Dokument mit einem bestimmten Layout oder Format kopieren möchten. Im Gegensatz dazu, die gesamte Seite von Grund auf neu zu erstellen

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL

Wie kann ich eine Webseite schnell aktualisieren? Wie kann ich eine Webseite schnell aktualisieren? Feb 18, 2024 pm 01:14 PM

Bei der täglichen Nutzung eines Netzwerks kommt es häufig zu Seitenaktualisierungen. Wenn wir eine Webseite besuchen, treten manchmal Probleme auf, z. B. wenn die Webseite nicht geladen wird oder nicht ordnungsgemäß angezeigt wird. Zu diesem Zeitpunkt entscheiden wir uns normalerweise dafür, die Seite zu aktualisieren, um das Problem zu lösen. Wie kann die Seite also schnell aktualisiert werden? Lassen Sie uns die Tastenkombinationen für die Seitenaktualisierung besprechen. Die Tastenkombination für die Seitenaktualisierung ist eine Methode zum schnellen Aktualisieren der aktuellen Webseite über Tastaturoperationen. In verschiedenen Betriebssystemen und Browsern können die Tastenkombinationen für die Seitenaktualisierung unterschiedlich sein. Im Folgenden verwenden wir das gebräuchliche W

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Mar 19, 2024 pm 04:33 PM

Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen

Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Feb 22, 2024 pm 08:21 PM

Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen

So implementieren Sie einen Seitensprung in 3 Sekunden: PHP-Programmierhandbuch So implementieren Sie einen Seitensprung in 3 Sekunden: PHP-Programmierhandbuch Mar 25, 2024 am 10:42 AM

Titel: Implementierungsmethode des Seitensprungs in 3 Sekunden: PHP-Programmierhandbuch In der Webentwicklung ist der Seitensprung eine übliche Operation. Im Allgemeinen verwenden wir Meta-Tags in HTML- oder JavaScript-Methoden, um zu Seiten zu springen. In bestimmten Fällen müssen wir jedoch Seitensprünge auf der Serverseite durchführen. In diesem Artikel wird erläutert, wie Sie mithilfe der PHP-Programmierung eine Funktion implementieren, die innerhalb von 3 Sekunden automatisch zu einer bestimmten Seite springt, und es werden auch spezifische Codebeispiele aufgeführt. Das Grundprinzip des Seitensprungs mit PHP ist eine Art

Wie man mit dem Problem umgeht, dass die Laravel-Seite CSS nicht korrekt anzeigen kann Wie man mit dem Problem umgeht, dass die Laravel-Seite CSS nicht korrekt anzeigen kann Mar 10, 2024 am 11:33 AM

„Wie man mit dem Fehler umgeht, dass Laravel-Seiten CSS nicht korrekt anzeigen, sind spezifische Codebeispiele erforderlich.“ Wenn Sie das Laravel-Framework zum Entwickeln von Webanwendungen verwenden, tritt manchmal das Problem auf, dass die Seite CSS-Stile nicht korrekt anzeigen kann, was dazu führen kann Seite, um abnormale Stile darzustellen. In diesem Artikel werden einige Methoden vorgestellt, um mit dem Versagen von Laravel-Seiten bei der korrekten Anzeige von CSS umzugehen, und spezifische Codebeispiele bereitgestellt, um Entwicklern bei der Lösung dieses häufigen Problems zu helfen. 1. Überprüfen Sie den Dateipfad. Überprüfen Sie zunächst den Pfad der CSS-Datei.

See all articles