Verstehen Sie kurz, wie Sie den Webseitentitel auf einer einzelnen Vue2-Seite festlegen

Frontend-Frameworks wie Vue, React usw. sind Single-Page-Anwendungen, was bedeutet, dass die gesamte Website tatsächlich eine Indexseite ist. Die sogenannten Seitensprünge ersetzen den Inhalt in index.html Der Titel der Seite lautet. Er wird nur einmal festgelegt, wenn jede Seite initialisiert wird. Für das aktuelle Front-End-Framework ist die herkömmliche Methode zum Festlegen des Titel-Tags auf jeder Seite nicht möglich. In diesem Artikel wird hauptsächlich das Festlegen des Webseitentitels auf einer einzelnen Seite in vue2 vorgestellt. Ich werde es jetzt mit Ihnen teilen und hoffe, dass es allen helfen kann.

Es wird empfohlen, das vue-wechat-title-Plug-in zu verwenden

Laden Sie die Plug-in-Abhängigkeiten herunter und installieren Sie sie

npm install vue-wechat-title --save

in main Einführung von Plug-ins in .js

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

Fügen Sie einen Titel zu jeder Route in der Routing-Datei index.js hinzu

 routes: [{
  path: '/',
  name: 'index',
  component: index,
  meta:{
    title:'首页' // 标题设置在这里
  }
 },{
  path:'/detail',
  name:'detail',
  component:detail,
  meta:{
    title:'详情页' // 标题设置在这里
  }
 }]

Ändern Sie die Router-View-Komponente in app.vue

<router-view v-wechat-title=&#39;$route.meta.title&#39;></router-view>

Starten Sie neu und versuchen Sie es, es funktioniert

Verwandte Empfehlungen:

Detaillierte Erklärung, wie Sie den Titel einer Webseite ändern, wenn diese den Fokus verliert

Im HTMLb2386ffb911b14667cb8f0f91ea547a7b25a9407cfe693f10872c2a72988c045-Tag wird ein Symbol hinzugefügt und das Logo-Symbol der Webseite wird auf der linken Seite des Webseitentitels angezeigt

JS implementiert ultraeinfaches Ausführen und Blinken von Webseitentiteln mit Prompt-Effekt-Code_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonVerstehen Sie kurz, wie Sie den Webseitentitel auf einer einzelnen Vue2-Seite festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!