Beispiel für das Abhören des Vue-Routings zum dynamischen Laden derselben Seite

Szenarioanalyse

Im System hat ein Modul drei Untermodule. In den Geschäftsdaten können die drei Untermodule direkt nach Typ unterschieden werden. Normalerweise schreiben wir in dasselbe Modul und wählen dann den Geschäftstyp aus. Der Eigentümer verlangt jedoch, dass dies in drei Menüs aufgeteilt wird. Benutzer können das Modul auswählen, das sie entsprechend ihren Anforderungen verwenden müssen.

Diese drei Menüs verwenden dieselbe Datentabelle. Wir müssen also nur eine Seite zum Auflisten, Hinzufügen und Bearbeiten schreiben. Bestimmen Sie dann anhand des Seitenaufrufpfads, zu welcher Kategorie sie gehört. Und springen Sie zur Seite zum Hinzufügen, Bearbeiten und Aufrufen der entsprechenden Listenschnittstelle der angegebenen Kategorie.

Entwicklung

Da die drei Module dieselbe Seite verwenden, müssen drei Routen konfiguriert und die Seiten unterschieden werden. Das Problem, mit dem wir jetzt konfrontiert sind, besteht darin, dass die drei Menüs zwar unterschiedliche Routen haben, aber dieselbe Seite sind. Beim Wechseln der Menüs wird die Hook-Funktion von Vue nicht ausgelöst. Dann sind die von den drei Listenseiten abgefragten Daten dieselben, was bedeutet, dass die Abfragemethode nicht ausgelöst wird, was dazu führt, dass die Bedingungen nicht gewechselt werden können.

Dann habe ich im Internet nach der Überwachungszeit gesucht. Ich habe festgestellt, dass ich die Methode zum Laden von Listendaten auslösen kann, wenn sich die Route durch Überwachung ändert. Der spezifische Code lautet wie folgt

Die Routen der Listenseiten werden mit 1, 2 und 3 nach der Liste hinzugefügt, um zu unterscheiden, um welche Seite es sich handelt.

betrachten:
    '$route.path': Funktion (neuerWert, alterWert) {
        // Parameter des neuen und alten Routing-Pfadtyps sind drei global definierte Menütypen this.type = newVal.substr(newVal.lastIndexOf("/") + 1);
        diese.suche();
    }
},

Wenn Sie dann die Route wechseln, können Sie die Listendaten erneut abrufen. Gleichzeitig muss die Erstellungsmethode auch die Suche aufrufen. Denn die Routenüberwachung funktioniert nur auf dieser Seite. Sie wird nicht ausgelöst, wenn andere Seiten die Route zu diesem Menü wechseln.

erstellt () {
    lass Pfad = this.$route.path;
    dieser.Typ = Pfad.substr(Pfad.letzterIndexVon("/") + 1);
    diese.suche();
},

Zusammenfassen

In der tatsächlichen Entwicklung können Sie die Überwachungsattribute entsprechend Ihren Anforderungen auswählen

betrachten:{  
    //Routenänderungen überwachen $route( nach , von ){   
       console.log( bis, von)
        // zu, von stellen dar, wohin jeweils gesprungen werden soll, beides sind Objekte // zu.Pfad (stellt die Adresse der Route dar, zu der gesprungen werden soll);
     }
}

Oben sind die Einzelheiten des Beispiels für das Vue-Routing-Listening, um ein dynamisches Laden derselben Seite zu erreichen. Weitere Informationen zum Vue-Routing-Listening, um ein dynamisches Laden derselben Seite zu erreichen, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!