Comment modifier dynamiquement le titre de la page dans Vue

Cet article présente principalement la méthode de modification dynamique du titre de la page basée sur le SPA basé sur Vue. Les amis qui en ont besoin peuvent s'y référer

Récemment, j'ai créé un site Web mobile SPA basé sur VUE et j'ai découvert que. le titre de la page peut être modifié dynamiquement via document.title=xxxx C'est vraiment pénible de le modifier, et on dit que cela n'a aucun effet du côté WeChat d'IOS. Baidu a découvert qu'il devait effectuer quelques opérations supplémentaires pour WeChat sur IOS, à savoir : créer un Iframe caché, puis charger un fichier image à volonté, puis le supprimer après le chargement, afin que le titre de la page puisse être modifié. Il existe plusieurs solutions sur Internet :

1. Définissez l'attribut titre dans App.Vue, puis liez le titre de la page. Pour modifier le titre de tous les sous-composants, utilisez this.$root.data.title=xxxxx ; 🎜>

Inconvénients : L'élément par défaut d'App.Vue est juste un p dans le corps. Pour ce faire, vous devez lier l'intégralité du code HTML

2 et implémenter

via des instructions personnalisées. Appelez la méthode :

Vue.directive('title', {
 inserted: function (el, binding) {
 document.title = el.innerText
 el.remove()
 }
})

<p v-title>标题内容</p> Avantages : cela présente un plus grand degré de personnalisation (sans discuter de la question de savoir si la fin IOS WeChat peut être modifiée avec succès)

Inconvénients : cela ne peut pas être fait. répondre aux besoins de modification du titre de la page dans certaines méthodes JS, par exemple, la page est une page websocket, après avoir reçu un message, il est nécessaire d'afficher dynamiquement le titre de la page. À ce stade, il n'est pas approprié de modifier fréquemment le titre. texte lié à p

Concernant les deux méthodes ci-dessus trouvées sur Internet, je les ai fusionnées et utilisé le plug-in vue pour implémenter SPA Modifier le titre de la page :

Méthode d'appel. :

var plugin={};
plugin.install=function(Vue,options){
 Vue.prototype.$title=function(title){
  document.title=title;
  var iframe=document.createElement("iframe");
  iframe.style.display='none';
  iframe.setAttribute('src','/e.png');
  var loadedCallback=()=>{
   iframe.removeEventListener('load',loadedCallback);
   document.body.removeChild(iframe);
  };
  iframe.addEventListener('load',loadedCallback);
  document.body.appendChild(iframe);
 };
};
module.exports=plugin;

Bien sûr, vous pouvez la remplacer par une variable liée, puis surveiller l'ajustement en temps réel.

this.$title('xxxxxx');

ps : Vue Spa change le titre lors du changement de page Pendant le processus de développement du composant Vue, car il s'agit d'un développement d'une seule page, parfois Le titre de la page doit être modifié en fonction de la situation, j'ai donc vérifié en ligne et trouvé diverses explications : wo (kan) et bu (dong), j'ai donc pensé à une technologie noire documet.title="xxx";

Créez un projet à volonté. Dans un module indépendant, créez document.title='title' après le démarrage de la fonction hook, mais il est dit qu'il n'est pas valide sous WeChat sous IOS. une machine Apple, ça marche, mais j'y ai pensé. Cela affectera mon obsession du code.

J'ai donc trouvé un outil utile vue-wechat-title sur github

<script>
export default {
  data(){
    return{
    }
  },
  created(){
    document.title="首页"
  },
}
</script>

Installé via

npm install vue-wechat-title Introduit les exigences de vue-router et de page requises Après le composant

ajoutez un paragraphe

const router = new VueRouter({
  mode: 'history',
  routes:[
    {
    name: 'index',
    path: '/',
    meta: {
        title: '首页'
     },
     component: index
    },
   {
     name: 'root',
     path: '/root', 
     meta: {
        title: '肉特'
    },
    component: root
    }  
 ]
});
Vue.use(require('vue-wechat-title')); //实例化参数

<p v-wechat-title="$route.meta.title"></p> en haut du composant. Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser ajax dans wordpress

Comment implémenter le composant parent pour transmettre des données au composant enfant dans vue

Comment implémenter un carrousel coulissant avec les doigts sur mobile en js

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!