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 HTML