Detaillierte Erklärung zum dynamischen Festlegen des Browsertitels in Vue

Unsinn

Normalerweise wird der Browsertitel so gesetzt

Aber Vue ist eine einseitige Anwendung, und die Eingabedatei hat nur ein HTML, sodass nur ein Tag festgelegt werden kann. Hier sind also zwei häufig verwendete Methoden zum dynamischen Festlegen von Browser-Tags.

Text

Der erste

Verwenden Sie die native Browsermethode document.title

router/index.js

router.beforeEach

//Für mehrsprachige Projekte importieren Sie i18n aus „@/i18n/index“ entsprechend Ihrem eigenen Projekt.
 Dokument.Titel = i18n.t("Router." + to.name)
 //Einsprachiges Projekt document.title = to.name

Die Sprachumschaltroute bleibt unverändert und sollte daher ebenfalls hinzugefügt werden. Projekte mit nur einer Sprache benötigen sie nicht.

//Mehrsprachiges Projekt document.title = i18n.t("router." + to.name)

Abgeschlossen, empfohlen, native Kompatibilität ist gut, keine Notwendigkeit, andere abhängige Pakete herunterzuladen und zu installieren

Der Zweite

Verwendung von Plugins

1. Installieren Sie das Plugin

npm installiere vue-wechat-title --save

2.main.js Referenz

Importieren Sie VueWechatTitle von 'vue-wechat-title' // Titel dynamisch ändern
Vue.use(VueWechatTitel)

3. Anweisungen hinzufügen

//Mehrsprachiges Projekt <router-view v-wechat-title="$t('router.' + $route.name)" ></router-view>
 //Einsprachiges Projekt <router-view v-wechat-title=" $route.name" ></router-view>

Fertig

Anmerkungen

Hinweis: Der Wert hängt von der Routing-Struktur Ihres eigenen Projekts ab. Diese Demo verwendet den Namenswert. i18n verfügt über ein entsprechendes Sprachpaket.

Sie können im Metaobjekt ein Titelattribut hinzufügen und außerhalb davon to.meta.title verwenden.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!