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 htmlb2386ffb911b14667cb8f0f91ea547a7b25a9407cfe693f10872c2a72988c045 ajoute une icône et l'icône du logo de la page Web est affichée sur le côté gauche du titre de la page Web

JS implémente l'exécution ultra-simple du titre de la page Web et l'effet d'invite clignotant des compétences code_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!