Apprenez deux méthodes pour définir le titre du navigateur dynamique Vue (exemples détaillés)

Cet article vous explique comment utiliser vue pour définir dynamiquement le titre du navigateur. J'espère qu'il vous sera utile.

vue définit dynamiquement le titre du navigateur

Habituellement, la définition du titre du navigateur est comme indiqué ci-dessous :

Mais vue est une application d'une seule page et le fichier d'entrée n'a qu'un seul code HTML, et une seule peut être définie comme balise, voici donc deux méthodes couramment utilisées pour définir dynamiquement les balises du navigateur

Texte

La première

utilise la méthode native du navigateur document.title

router/index.js
router.beforeEach

//多语言项目，根根据自己项目来
 import i18n from '@/i18n/index';
 document.title = i18n.t("router." + to.name)
 
 //单语言项目
  document.title = to.name

La route de changement de langue reste inchangée, elle doit donc être ajoutée. Les projets monolingues n'en ont pas besoin

//多语言项目
  document.title = i18n.t("router." + to.name)

Il a une bonne compatibilité native et n'est pas recommandé. devez télécharger et installer d'autres packages de dépendances

Deuxième type

Utiliser des plug-ins

1 Installer des plug-ins

npm install vue-wechat-title --save

2.main.js référence

import VueWechatTitle from 'vue-wechat-title'//动态修改title
Vue.use(VueWechatTitle)

3.

Notes

Remarque : la valeur est basée sur la structure de routage de votre propre projet, qui est utilisée dans cette démo. C'est la valeur du nom, i18n a un package de langue correspondant,

Vous pouvez ajouter un attribut de titre au méta-objet, et utilisez to.meta.title à l'extérieur

[Recommandation associée : "tutoriel vue.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!