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“

So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

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

So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

So verwenden Sie VirtualBox zum Simulieren eines Linux-Clusters

Kurs zur Web-Frontend-Entwicklung Was sind die Web-Frontend-Entwicklungstools

Implementierung der Einzelprozesssteuerung des Linux C-Hintergrunddienstprogramms

Detaillierte Erläuterung der Angular-Routing-Animation und der erweiterten Animationsfunktionen

Zusammenfassung des in JS implementierten Minesweeping-Projekts

Details und Beispielcode der MySQL-Replikationstabelle

js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

Diagramm zur Installation von MySQL 5.6 unter Windows 7

Beispiel für die Konfiguration mehrerer SSL-Zertifikate für eine einzelne Nginx-IP-Adresse

Artikel empfehlen

JavaScript zum Erreichen der Produktabfragefunktion

JavaScript-Datenübertragung zwischen verschiedenen Seiten (URL-Parametererfassung)

Die Verknüpfungsmethode zwischen Menü und Registerkarte von vue+iview

Grundlegendes Tutorial zum WeChat-Miniprogramm: Verwendung von Echart

Vue-Beispielcode zur Implementierung einer horizontalen Zeitleiste mit zwei Spalten

Detaillierte Erläuterung häufiger Xshell-Probleme und zugehöriger Konfigurationen

Detaillierte Erläuterung der MySQL-Lösung zur USE DB-Überlastung

js zur Implementierung einer Interferenz mit Verifizierungscodes (statisch)

Lösung für zu große Mysql-Binlog-Protokolldateien

Vue implementiert Div-Rad zum Vergrößern und Verkleinern

Lösung für 700 % CPU-Auslastung eines Linux-Prozesses, der nicht beendet werden kann

Tutorial-Analyse zur Installation und Nutzung des Linux-Leistungsüberwachungstools nmon

Oracle VM VirtualBox-Installation des CentOS7-Betriebssystems – Tutorial-Diagramm

HTML-Beispielcode zum Lesen und Anzeigen von Bildern in einem lokalen Ordner

Linux verwendet Bond, um zwei Netzwerkkarten zu implementieren und einen einzelnen IP-Beispielcode zu binden