Heim > Artikel > Web-Frontend > So verwalten Sie Head-Tags mit Vue-Meta

So verwalten Sie Head-Tags mit Vue-Meta

亚连Original: 2018-06-11 15:33:524487Durchsuche

In diesem Artikel wird hauptsächlich ausführlich vorgestellt, wie Sie mit Vue-Meta Header-Tags eleganter verwalten können. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Wenn Sie in einer Vue SPA-Anwendung das HTML-Head-Tag ändern möchten, können Sie dies direkt im Code tun:

// 改下title
document.title = &#39;what?&#39;
// 引入一段script
let s = document.createElement(&#39;script&#39;)
s.setAttribute(&#39;src&#39;, &#39;./vconsole.js&#39;)
document.head.appendChild(s)
// 修改meta信息，或者给html标签添加属性...
// 此处省略一大坨代码...

Heute werde ich Ihnen eine elegantere Möglichkeit vorstellen, zum Verwalten des Header-Tags vue-meta

vue-meta-Einführung

Seiten-Metainformationen in Vue 2.0-Komponenten verwalten + Unterstütztes Streaming.

In Anlehnung an die Einführung zu vue-meta github wird das auf Vue 2.0 basierende Vue-Meta-Plug-In hauptsächlich zur Verwaltung von HTML-Header-Tags verwendet und unterstützt auch SSR.

vue-meta verfügt über die folgenden Funktionen:

Durch Festlegen von metaInfo in der Komponente können die Header-Tags einfach verwaltet werden
Die Daten von metaInfo reagieren, wenn sich die Daten ändern, werden die Header-Informationen automatisch aktualisiert
Support SSR

Verwendung

Bevor ich die Verwendung vorstelle, möchte ich einen kürzlich populären Begriff „Server Side Rendering“ (SSR, Server Side Render) bekannt machen Wird eine bestimmte Seite erreicht, gibt der Server die gerenderte Seite direkt an den Browser zurück.

Wir wissen, dass vue-meta SSR unterstützt. Die folgende Einführung ist in zwei Teile unterteilt:

Client-Client

In der Eintragsdatei installieren vue-meta-Plugin

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import VueMeta from &#39;vue-meta&#39;

Vue.use(VueRouter)
Vue.use(VueMeta)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Dann können Sie es in der Komponente verwenden

export default {
 data () {
  return {
   myTitle: &#39;标题&#39;
  }
 },
 metaInfo: {
  title: this.myTitle,
  titleTemplate: &#39;%s - by vue-meta&#39;,
  htmlAttrs: {
   lang: &#39;zh&#39;
  },
  script: [{innerHTML: &#39;console.log("hello hello!")&#39;, type: &#39;text/javascript&#39;}],
  __dangerouslyDisableSanitizers: [&#39;script&#39;]
 },
 ...
}

Sie können einen Blick auf die Seitenanzeige werfen

Machen Sie sich mit Nuxt.js vertraut. Schüler werden feststellen, dass der Schlüsselname der Meta-Info-Konfiguration inkonsistent ist. Es kann über die folgende Konfigurationsmethode geändert werden:

// vue-meta configuration 
Vue.use(Meta, {
 keyName: &#39;head&#39;, // the component option name that vue-meta looks for meta info on.
 attribute: &#39;data-n-head&#39;, // the attribute name vue-meta adds to the tags it observes
 ssrAttribute: &#39;data-n-head-ssr&#39;, // the attribute name that lets vue-meta know that meta info has already been server-rendered
 tagIDKeyName: &#39;hid&#39; // the property name that vue-meta uses to determine whether to overwrite or append a tag
})

Eine umfassendere und detailliertere API finden Sie unter vue-meta github

Server server

Schritt 1. Das $meta-Objekt in den Kontext einfügen

server-entry.js:

import app from &#39;./app&#39;

const router = app.$router
const meta = app.$meta() // here

export default (context) => {
 router.push(context.url)
 context.meta = meta // and here
 return app
}

$meta stellt hauptsächlich die Injektions- und Aktualisierungsmethoden bereit. Die auf der Serverseite verwendete Methode „inject“ gibt die eingestellten Metainformationen zurück; die auf der Clientseite verwendete Methode „refresh“ wird zum Aktualisieren der Metainformationen verwendet.

Schritt 2. Verwenden Sie die inject()-Methode, um die Seite auszugeben

server.js:

app.get(&#39;*&#39;, (req, res) => {
 const context = { url: req.url }
 renderer.renderToString(context, (error, html) => {
  if (error) return res.send(error.stack)
  const bodyOpt = { body: true }
  const {
   title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
  } = context.meta.inject()
  return res.send(`
   <!doctype html>
   <html data-vue-meta-server-rendered ${htmlAttrs.text()}>
    <head>
     ${meta.text()}
     ${title.text()}
     ${link.text()}
     ${style.text()}
     ${script.text()}
     ${noscript.text()}
    </head>
    <body ${bodyAttrs.text()}>
     ${html}
     <script src="/assets/vendor.bundle.js"></script>
     <script src="/assets/client.bundle.js"></script>
     ${script.text(bodyOpt)}
    </body>
   </html>
  `)
 })
})

Quellcode-Analyse

Ich habe vorhin erwähnt, wie man vue-meta verwendet. Vielleicht fragen Sie sich, wie diese Funktionen implementiert werden, also lassen Sie mich den Quellcode mit Ihnen teilen.

Wie unterscheidet man zwischen Client- und Server-Rendering?

vue-meta fügt den MetaInfo-Satz in der Komponente in this.$metaInfo in die Hook-Funktion beforeCreate() ein. Wir können in anderen Lebenszyklen auf die Eigenschaften unter this.$metaInfo zugreifen.

if (typeof this.$options[options.keyName] === &#39;function&#39;) {
 if (typeof this.$options.computed === &#39;undefined&#39;) {
  this.$options.computed = {}
 }
 this.$options.computed.$metaInfo = this.$options[options.keyName]
}

vue-meta überwacht Änderungen in $metaInfo in den Hook-Funktionen des Lebenszyklus, wie z. B. erstellt. Wenn Änderungen auftreten, wird die Aktualisierungsmethode unter $meta aufgerufen. Aus diesem Grund ist metaInfo responsiv.

created () {
 if (!this.$isServer && this.$metaInfo) {
  this.$watch(&#39;$metaInfo&#39;, () => {
   batchID = batchUpdate(batchID, () => this.$meta().refresh())
  })
 }
},

Die Serverseite stellt hauptsächlich die Injektionsmethode unter $meta bereit. Durch Aufrufen der Injektionsmethode werden die entsprechenden Informationen zurückgegeben.

Wie ändern Client und Server Tags?

Um das Etikett auf der Clientseite zu ändern, müssen Sie die

return function updateTitle (title = document.title) {
 document.title = title
}

Serverseite direkt über die am Anfang dieses Artikels erwähnten nativen JS ändern Textmethode, um die Bezeichnung

return function titleGenerator (type, data) {
 return {
  text () {
   return `<${type} ${attribute}="true">${data}</${type}>`
  }
 }
}

im String-Format zurückzugeben

__dangerouslyDisableSanitizers Was tun sie?

vue-meta maskiert standardmäßig spezielle Zeichenfolgen. Wenn __dangerouslyDisableSanitizers festgelegt ist, wird es nicht maskiert.

const escapeHTML = (str) => typeof window === &#39;undefined&#39;
 // server-side escape sequence
 ? String(str)
  .replace(/&/g, &#39;&&#39;)
  .replace(/</g, &#39;<&#39;)
  .replace(/>/g, &#39;>&#39;)
  .replace(/"/g, &#39;"&#39;)
  .replace(/&#39;/g, &#39;&#39;&#39;)
 // client-side escape sequence
 : String(str)
  .replace(/&/g, &#39;\u0026&#39;)
  .replace(/</g, &#39;\u003c&#39;)
  .replace(/>/g, &#39;\u003e&#39;)
  .replace(/"/g, &#39;\u0022&#39;)
  .replace(/&#39;/g, &#39;\u0027&#39;)

Endlich

Ich kam zum ersten Mal in Nuxt.js mit Vue-Meta in Kontakt. Wenn Sie mehr über Nuxt.js erfahren möchten, können Sie gerne die Nuxt.js-Praxis lesen und die Fallstricke von Nuxt.js teilen. Sollte der Artikel eine unklare oder unangemessene Formulierung enthalten, können Sie diese gerne kritisieren und korrigieren.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Symbolsymbole über Element in Vue verwenden

So verwenden Sie Vue.set(), um eine dynamische Datenantwort zu erreichen

So binden Sie Bilder und Datenrückgabebildpfade in Vue dynamisch

So ändern Sie statische Bilder dynamisch und fordern Netzwerkbilder in Vue an

Watch-Nutzung in Vue vorab laden

So verwenden Sie das Browser-Plug-in Batarang in Angular

So implementieren Sie die Pasteboard-Kopierfunktion mit JS

Zahlentyp in JS (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwalten Sie Head-Tags mit Vue-Meta. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html angular String 字符串 JS number 对象 this github

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwendung von Slots/Slots mit Gültigkeitsbereich in Vue in tatsächlichen ProjektenNächster Artikel：Verwendung von Slots/Slots mit Gültigkeitsbereich in Vue in tatsächlichen Projekten

In Verbindung stehende Artikel

Mehr sehen