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“

Einige allgemeine erweiterte SQL-Anweisungen in MySQL

MySQL 8.0.22 Zip-komprimierte Paketversion (kostenlose Installation) Download, Installations- und Konfigurationsschritte detailliert

Artikel

Eine kurze Analyse der Grundkonzepte von HTML-Webseiten

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

Einige allgemeine erweiterte SQL-Anweisungen in MySQL

Canvas zeichnet Rubbellos-Effekt

MySQL-Datenbank-Entwicklungsspezifikationen [empfohlen]

MySQL 8.0.22 Zip-komprimierte Paketversion (kostenlose Installation) Download, Installations- und Konfigurationsschritte detailliert

Eine kurze Analyse der Grundkonzepte von HTML-Webseiten

So stellen Sie Docker-Containerdaten wieder her

Zehn nützliche und einfache MySQL-Funktionen

CSS realisiert die Szenenanalyse von halbtransparenten Rändern und Mehrfachrändern

Detaillierte Erklärung der Funktionen outfile, dumpfile und load_file bei der MySQL-Injektion

MySQL 5.6.27 Installations-Tutorial unter Linux

Artikel empfehlen

Detaillierte Erklärung der HTML-Ereignisse „onfocus gain focus“ und „onblur lose focus“

So implementieren Sie den neuen Operator von JavaScript selbst

Detaillierte Erklärung des Plattformbusses des Linux-Treibers

Lösen Sie schnell das Problem, dass der mysql57-Dienst plötzlich verschwunden ist

Tägliches automatisches Backup der MySQL-Datenbank mit mysqldump in Centos7 schreiben

Detaillierte Erklärung, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst

Was Sie über Responsive Design wissen müssen

Einfaches Teilen von Mysql-Backup-BAT-Skripten unter Windows

Details zur Vue-Vorlagenkompilierung

JavaScript imitiert den Jingdong-Karusselleffekt

Beispiel für die Einrichtung und Verwendung des HTML-Floating-Frames (Iframe lädt HTML)

Grundlegende Anweisungen der MySQL-Datendefinitionssprache DDL

Detaillierte Erläuterung der Linux-Befehle „Datei überschreiben“ und „Datei anhängen“

Detaillierte Erklärung der Linux-Less-Befehlsbeispiele

Erweiterte Verwendungsbeispiele für den Befehl mv in Linux