Detaillierte Erläuterung des Vue Router Routing Guard

1. Global vor jedem

Wenn der im lokalen Speicher gespeicherte Name zhangsan lautet, wird der Nachrichteninhalt nur angezeigt, wenn auf die Nachricht geklickt wird

1. Global vor jedem

Fügen Sie dem Router vor jedem Schritt einen Routing-Guard hinzu

Grammatik:

router.beforeEach((bis, von, weiter)=>{})

Funktion: Rufen Sie die Funktion in beforeEach während der Initialisierung und vor jedem Routenwechsel auf.

Parameter:

1.to: Zielroute

2.von: die Route vor dem Sprung

3.weiter: Veröffentlichung

2. Umsetzung

2. Anforderung 2

Wenn vor dem Springen viele Pfade beurteilt werden müssen, müssen Sie viel Beurteilungscode schreiben und die Beurteilungsstruktur wird sehr kompliziert.

Zu diesem Zeitpunkt können Sie ein Meta-Tag in die Route einfügen, die beurteilt werden muss.

Der Meta-Tag stellt Metadaten zum HTML-Dokument bereit (Metadaten beziehen sich auf Daten, die zur Beschreibung von Daten verwendet werden).

Zu diesem Zeitpunkt können Sie das Tag-Feld in Meta verwenden, um eine Beurteilung vorzunehmen

3. Globaler Post-Guard nach jedem

Die Verwendung von afterEach und beforeEach ist grundsätzlich gleich.

Der Unterschied besteht darin, dass afterEach nicht den nächsten Parameter hat

1. Ändern Sie den Titel in Ihren eigenen Titel

Weisen Sie jeder Route einen eigenen Titelnamen zu

const router = neuer VueRouter({
  Routen: [
    {
      Name: 'Heimat',
      Pfad: '/home',
      Komponente: Home,
      Meta: {
        Titel: "Zuhause"
      },
      Kinder: [ 
        {
          Name: "xiaoxi",
          Pfad: "Nachricht",
          Komponente: Nachricht,
          Meta: {
            Titel: "Neuigkeiten"
          },
          Kinder: [
            {
              Name: 'xiangqing',
              Pfad: "Detail",
              Komponente: Detail,
              Meta: {
                isAuth: wahr,
                Titel: „Nachrichtendetails“
              }
            }
          ]
        }
      ]
    },
    {
      Pfad: '/about',
      Komponente: Über,
      Meta: {
        Titel: "Über"
      }
    }
  ]
})

Ändern Sie den Titelnamen in beforeEach

router.afterEach((bis, von) => {
  Dokumenttitel = zu.Metatitel || "Test"
})

4. Schutz innerhalb von Komponenten

1. vorRouteEnter

Wird aufgerufen, wenn diese Komponente über Routing-Regeln aufgerufen wird

2. vorRouteLeave

Wird aufgerufen, wenn die Komponente durch Routing-Regeln verlassen wird

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!