Detaillierte Erklärung des Hash-Jump-Prinzips von Vue

Klasse VueRouter{
 Konstruktor(Optionen){
  this.matcher = createMatcher(Optionen.Routen || []);
//Um hier den Hash-Modus zu erklären, werden wir nicht beurteilen, welchen Modus der Benutzer übergeben hat this.history = new HashHistory(this); //diese Vue-Router-Instanz}
}

Verlauf aus „./base“ importieren
// Hash-Routing exportiert Standardklasse HashHistory erweitert History{
 Konstruktor(Router){
  super(router); //Erben und Aufrufen der übergeordneten Klasse ist gleich Aufruf
 }
}
// Basisklasse für Routing-Export Standardklasse History {
 Konstruktor(Router){
  dieser.router = router;
 }
}

Verlauf aus „./base“ importieren;
Funktion EnsureSlash(){ 
 wenn(Fenster.Standort.Hash){
  zurückkehren 
 }
 fenster.standort.hash = "/"
}
exportiere Standardklasse HashHistory erweitert History{
 Konstruktor(Router){
  super(Router);
  EnsureSlash(); // Stelle sicher, dass ein Hash vorhanden ist
 }
}

init(app){
  const Verlauf = diese.Geschichte;
  // Beim Initialisieren sollten Sie zuerst den aktuellen Pfad abrufen und eine Matching-Logik ausführen. // Lassen Sie das Routing-System zu einem bestimmten Pfad wechseln. const setupHashListener = ()=> {
   history.setupListener(); // Auf Pfadänderungen achten}
  history.transitionTo( // Die übergeordnete Klasse stellt eine Methode bereit, die für das Springen zuständig ist history.getCurrentLocation(), // Die untergeordnete Klasse erhält den entsprechenden Pfad // Nachdem der Sprung erfolgreich war, registrieren Sie den Pfad-Listener, um sich auf die Ansichtsaktualisierung vorzubereiten setupHashListener
  )
}

Funktion getHash(){
 gibt window.location.hash.slice(1) zurück;
}
exportiere Standardklasse HashHistory erweitert History{
 // ...
 getAktuellerStandort(){
  gibt getHash() zurück;
 }
}

exportiere Standardklasse HashHistory erweitert History{
 // ...
 setupListener(){
  window.addEventListener('hashchange', ()=> {
   // Übergang zum entsprechenden Pfad gemäß dem aktuellen Hash-Wert this.transitionTo(getHash());
  })
 }
}

Exportfunktion createRoute(Datensatz, Standort) { // {Pfad:'/',übereinstimmend:[Datensatz,Datensatz]}
 lass res = [];
 if (Datensatz) { // Wenn ein Datensatz vorhanden ist while (Datensatz) {
   res.unshift(Datensatz); // setze den übergeordneten Datensatz des aktuellen Datensatzes an den Anfang Datensatz = Datensatz.übergeordnet
  }
 }
 zurückkehren {
  ...Standort,
  Übereinstimmung: res
 }
}
exportiere Standardklasse Verlauf {
 Konstruktor(Router) {
  dieser.router = router;
  //Gibt das Objekt basierend auf dem Datensatz und dem Pfad zurück, das später für das Router-View-Matching verwendet wird this.current = createRoute(null, {
   Weg: '/'
  })
 }
 // Kernlogik transitionTo(location, onComplete) {
  // Um ​​den Pfad abzugleichen, let route = this.router.match(location);
  // Derselbe Pfad muss nicht gewechselt werden, wenn(
   Standort === Route.Pfad && 
   route.übereinstimmende.Länge === diese.aktuelle.übereinstimmende.Länge){
   zurückkehren 
  }
  //Aktualisieren Sie die Route und ändern Sie das _route-Attribut der Stamminstanz wie unten beschrieben this.updateRoute(route)
  beiAbgeschlossen und beiAbgeschlossen();
 }
}

exportiere Standardklasse VueRouter{
 // ...
 //Erstellen Sie eine Proxy-Übereinstimmung (Standort){
  gib this.matcher.match(Standort) zurück;
 }
}

function match(location){ // Später den entsprechenden Datensatz basierend auf dem Pfad finden let record = pathMap[location]
 if (record) { // Erstelle die entsprechende Route entsprechend dem Datensatz //Parameter: /about/a:{path:xx,component...},path:'/about/a'
  returniere Route erstellen(Datensatz,{
   Pfad:Standort
  })
 }
 // Wenn keine Übereinstimmung gefunden wird, gib eine leere Übereinstimmung zurück return createRoute(null, {
  Pfad: Standort
 })
}

installieren(Vue) {
 Vue.mixin({ // Füge die Methode beforeCreate zum Lebenszyklus aller Komponenten hinzu beforeCreate() {
   wenn (diese.$options.router) { 
   //Rufen Sie die bidirektionale Datenbindungsmethode in der Vue-Klasse auf Vue.util.defineReactive(this,'_route',this._router.history.current);
   } 
  }
 });
 // Die Methoden $route und $router sind die gebräuchlichsten Proxys in Vue. Sie dienen lediglich der Benutzerfreundlichkeit. Object.defineProperty(Vue.prototype,'$route',{ // Jede Instanz kann die Eigenschaft $route abrufen get(){
   return this._routerRoot._route; //Bidirektionale Datenbindung, die gerade oben durchgeführt wurde}
 });
 Object.defineProperty(Vue.prototype,'$router',{ // Jede Instanz kann den Router abrufen instanceget(){
   gib dies zurück._routerRoot._router;
  }
 })
 }

history.listen((route) => { // Muss das Attribut _route aktualisieren, eine Funktion aufrufen und beenden app._route = route
});

exportiere Standardklasse Verlauf {
 Konstruktor(Router) {
  // ...
  dies.cb = null;
 }
 hören(cb){
  this.cb = cb; //Funktion registrieren}
 updateRoute(route){
  dies.aktuell =Route;
  this.cb && this.cb(route); // Aktualisiere die Eigenschaft _route, nachdem du die aktuelle aktualisiert hast}
}