Comprenez brièvement comment définir le titre de la page Web sur une seule page vue2

Les frameworks front-end tels que Vue, React, etc. sont des applications à page unique, ce qui signifie que l'ensemble du site Web est en fait une page d'index. Les soi-disant sauts de page remplacent le contenu dans index.html et le. le titre de la page est Il n'est défini qu'une seule fois lors de l'initialisation de chaque page. Pour le framework front-end actuel, la méthode traditionnelle consistant à définir la balise de titre sur chaque page n'est pas réalisable. Cet article présente principalement comment définir le titre d'une page Web sur une seule page dans vue2. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra aider tout le monde.

Il est recommandé d'utiliser le plug-in vue-wechat-title

Télécharger et installer les dépendances du plug-in

npm install vue-wechat-title --save

dans main Introduire les plug-ins dans .js

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

Ajouter un titre à chaque route dans le fichier de routage index.js

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

Modifier le composant router-view dans app.vue

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

Redémarrez et essayez, ça marche

Recommandations associées :

Explication détaillée sur la façon de changer le titre d'une page Web lorsqu'elle perd le focus

Dans la balise html