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“

Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung

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

Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung

Lösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann

So aktivieren Sie die Swoole Loader-Erweiterung auf dem virtuellen Host des Linux-Systems

Umfassende Inventarisierung wichtiger Logdateien in MySQL

Implementieren Sie Group By basierend auf MySQL, um die neuesten Daten jeder Gruppe zu erhalten

Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images

Kostenloses Tool zur Überprüfung der Richtigkeit von HTML-, CSS- und RSS-Feeds

So konfigurieren Sie Java-Umgebungsvariablen im Linux-System

Implementierung eines einfachen Whack-a-Mole-Spiels in JavaScript

Das Konzept der MySQL-Tablespace-Fragmentierung und Lösungen für damit verbundene Probleme

Artikel empfehlen

Detaillierte Erklärung von Promises in JavaScript

So ändern Sie den Bildlaufleistenstil in Vue

Wie viele Ports kann ein Linux-Server maximal öffnen?

CentOS 7.5 stellt Varnish-Cache-Serverfunktion bereit

js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

Drei häufige Verwendungen von OpenLayers6-Karten-Overlays (Markierungstext im Popup-Fenster)

Alibaba Cloud Nginx konfiguriert https, um ein Domänennamen-Zugriffsprojekt zu implementieren (grafisches Tutorial)

11 Möglichkeiten, Duplikate aus JS-Arrays zu entfernen

Detaillierte Erläuterung der Konfiguration des Samba-Ordnerfreigabeservers unter CentOS

So ändern Sie das MySQL-Passwort auf dem XAMPP-Server (mit Bildern)

Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.

So erstellen Sie eine LNMP-Umgebung unter Ubuntu 20.04

So konfigurieren Sie mehrere Tomcats mit Nginx-Lastausgleich unter Linux

Zusammenfassung von drei Möglichkeiten zum Implementieren von Rankings in MySQL ohne Verwendung von „order by“

Reines CSS, um coole Neonlichteffekte zu erzielen (mit Demo)