Vue verwendet Vue-Metainformationen, um den Titel und die Metainformationen jeder Seite festzulegen

Titel: Vue verwendet Vue-Meta-Info, um den Titel und die Metadaten jeder Seite festzulegen. #Der Anzeigename auf der Artikelseite, normalerweise auf Chinesisch

Datum: 20.11.2019 16:30:16 #Der Zeitpunkt, zu dem der Artikel erstellt wurde. Im Allgemeinen wird er nicht geändert. Natürlich kann er nach Belieben geändert werden.

Kategorien: vue #Kategorien

Tags: [vue] #Artikel-Tags, können leer sein, bitte verwenden Sie das Format für mehrere Tags, Hinweis: Danach folgt ein Leerzeichen

Beschreibung: Vue verwendet Vue-Meta-Info, um den Titel und die Metadaten jeder Seite festzulegen.

Um vue-meta-info zum Konfigurieren von Titel und Metadaten zu verwenden, befolgen Sie diese Schritte:

1. Installation

npm installiere vue-meta-info --save

2. Importieren in main.js

MetaInfo aus „vue-meta-info“ importieren
Vue.use(MetaInfo)

3. Auf der Vue-Seite konfigurieren

<Vorlage>
  ...
</Vorlage>
 
<Skript>
  Standard exportieren {
    MetaInfo:
      Titel: „Meine Beispiel-App“, // einen Titel festlegen
      meta: [ // Meta festlegen
      	{                
        	Name: "Schlüsselwörter",
        	Inhalt: „Meine Beispiel-App“
      	},
      	{
        	Name: 'Beschreibung',
        	Inhalt: „Dies ist eine Beschreibung einer Webseite“
   		 }
      ]
      link: [{ // Link setzen
       		rel: 'asstes',
        	href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</Skript>

Wenn Ihr Titel oder Ihre Metadaten asynchron geladen werden, müssen Sie möglicherweise Folgendes verwenden

<Vorlage>
  ...
</Vorlage>
 
<Skript>
  Standard exportieren {
    Name: "async",
    metaInfo () {
      zurückkehren {
        Titel: dieser.Seitenname
      }
    },
    Daten () {
      zurückkehren {
        Seitenname: "wird geladen"
      }
    },
    montiert () {
      setzeTimeout(() => {
        this.pageName = "asynchron"
      }, 2000)
    }
  }
</Skript>

Wenn Sie Vue SSR zum Rendern der Seite verwenden, müssen Sie Folgendes beachten:

Da es kein dynamisches Update gibt, werden von allen Lebenszyklus-Hook-Funktionen während des Server-Side-Rendering-Prozesses (SSR) nur „beforeCreate“ und „created“ aufgerufen. Dies bedeutet, dass Code in allen anderen Lifecycle-Hook-Funktionen (wie etwa beforeMount oder mounted) nur auf der Clientseite ausgeführt wird. Beachten Sie auch, dass Sie Code vermeiden sollten, der während der Lebenszyklen „beforeCreate“ und „created“ globale Nebenwirkungen hat, wie z. B. die Verwendung von „setInterval“ zum Einstellen eines Timers. In ausschließlich clientseitigem Code können wir einen Timer einstellen und ihn dann während des Lebenszyklus „beforeDestroy“ oder „destroyed“ zerstören. Da die Destroy-Hook-Funktion während SSR jedoch nicht aufgerufen wird, bleibt der Timer für immer erhalten. Um dies zu vermeiden, verschieben Sie den Nebeneffektcode in den Lebenszyklus „beforeMount“ oder „Mounted“.

Basierend auf den oben genannten Einschränkungen können wir derzeit statische Daten verwenden, um unsere Metainformationen darzustellen. Hier ist ein Beispiel:

<Vorlage>
  ...
</Vorlage>
 
<Skript>
  Standard exportieren {
    MetaInfo:
      Titel: „Meine Beispiel-App“, // einen Titel festlegen
      meta: [{ // Meta festlegen
        Name: "Schlüsselwörter",
        Inhalt: „Meine Beispiel-App“
      }]
      link: [{ // Link setzen
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</Skript>

Zu diesem Zeitpunkt hilft uns vueMetaInfo, eine Titelvariable und ein Renderobjekt im Kontext von SSR bereitzustellen. Etwa so:

Kontext = {
  ...
  Titel: „Meine Beispiel-App“,
  rendern: {
    Meta: Funktion () { ... },
    Link: Funktion () { ... }
  }
}

An diesem Punkt können wir unsere Vorlage transformieren:

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">
    <Titel>{{Titel}}</Titel>
    {{{render.meta && render.meta()}}}
    {{{render.link && render.link()}}}
  </Kopf>
  <Text>
    <!--vue-ssr-outlet-->
  </body>
</html>

Dadurch können Sie die erforderlichen Daten rendern. Es ist erwähnenswert, dass wir zwar

<Vorlage>
  ...
</Vorlage>
 
<Skript>
  Standard exportieren {
    Name: "async",
    metaInfo () {
      zurückkehren {
        Titel: dieser.Seitenname
      }
    },
    Daten () {
      zurückkehren {
        Seitenname: "wird geladen"
      }
    },
    montiert () {
      setzeTimeout(() => {
        this.pageName = "asynchron"
      }, 2000)
    }
  }
</Skript>

Beachten:

Dieses Formular wird zum Definieren von Daten verwendet, der endgültig gerenderte Titel wird jedoch noch geladen, da für das serverseitige Rendering außer „create“ und „beforeCreate“ kein bereitgestellter Hook vorhanden ist.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Vue-Metainformationen zum Festlegen des Titels und der Metadaten jeder Seite. Weitere relevante Inhalte zu Vue-Einstellungsseitentiteln und Metadaten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

So legen Sie Meta-Tags und Titel-Tags in Vue dynamisch fest
Detaillierte Erklärung der Verwendung von Metadaten im Vue-Router
Detaillierte Erklärung, wie Sie mit vue-meta Head-Tags eleganter verwalten können
vue+vue-meta-info Tutorial zum dynamischen Einstellen von Meta-Tags

<<: W3C Tutorial (1): W3C verstehen

>>: Grundlegendes zur CSS-Eigenschaft „transform-origin“

Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux

Vue verwendet Vue-Metainformationen, um den Titel und die Metainformationen jeder Seite festzulegen

Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux

Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete für MySQL 5.7.24

JavaScript zur Implementierung eines einfachen Web-Rechners

Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld

Detaillierte Erklärung zur Verwendung des CMD-Befehls zum Bedienen einer MySql-Datenbank

Zusammenfassung der Lösungen für MySQL, das „Gruppieren nach“ nicht unterstützt

So öffnen Sie das MySQL-Binlog-Protokoll

Freigabe der schnellen Wiederherstellungslösung für große MySQL-SQL-Dateien

Lösung für das Problem, dass das Hintergrundbild eines Etiketts im IE8 nicht angezeigt wird

Der Implementierungsprozess zum Extrahieren von Oracle-Daten in eine MySQL-Datenbank

Artikel empfehlen

Docker-Image-Erstellung und Paketierung und Bereitstellung des gesamten Projekts mit einem Klick

Analyse der MySql-Indexnutzungsstrategie

So implementieren Sie Lastenausgleich in MySQL

js realisiert bidirektionale Datenbindung (Accessor-Überwachung)

Beschreibung der HTML-Meta-Viewport-Attribute

MySQL-Techniken zum schnellen Datenvergleich

So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten

Grafische Erklärung des zugrunde liegenden Prinzips der JavaScript-Bereichskette

So komprimieren Sie Bilder effektiv mit JS

Docker-Container: benutzerdefinierter Host-Netzwerkzugriffsvorgang

Detaillierte Schritte zur Installation von mysql5.7.18 auf dem Mac

Detaillierte Schritte zur Implementierung der Excel-Importfunktion in Vue

Einführung in häufig verwendete MySQL-Befehle in der Linux-Umgebung

Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger