Comment modifier dynamiquement les noms des onglets du navigateur dans les projets Vue

Vue est un framework de développement front-end populaire qui est de plus en plus largement utilisé. Dans le projet Vue, modifier le nom de l'onglet du navigateur est une exigence courante. Cet article explique comment modifier dynamiquement le nom de l'onglet du navigateur dans le projet Vue.

Dans le projet Vue, nous pouvons modifier le nom de l'onglet du navigateur en modifiant l'attribut title du composant page. Voici un exemple simple :

<template>
  <div>
    <h1>欢迎来到我的博客</h1>
  </div>
</template>

<script>
export default {
  name: 'Blog',
  mounted() {
    document.title = '我的博客'
  }
}
</script>

Dans le code ci-dessus, nous définissons l'attribut document.title sur "Mon blog" dans la fonction de cycle de vie montée du composant, de sorte que lorsque l'utilisateur visite cette page, l'onglet du navigateur Le nom deviendra "Mon Blog".

Si nous voulons que le nom de l'onglet du navigateur de chaque page soit différent, nous pouvons mettre le code pour définir le nom de l'onglet du navigateur dans le routeur, par exemple :

<template>
  <div>
    <h1>欢迎来到{{pageTitle}}</h1>
  </div>
</template>

<script>
export default {
  name: 'Blog',
  computed: {
    pageTitle() {
      return this.$route.meta.title
    }
  },
  mounted() {
    document.title = this.pageTitle
  }
}
</script>

Dans le code ci-dessus, nous mettons le code dans le composant calculé La propriété $route.meta.title est obtenue à partir de la propriété calculée et liée à {{pageTitle}} dans le modèle. Enfin, la propriété document.title est définie sur pageTitle dans la fonction de cycle de vie montée. De cette façon, le nom de l'onglet du navigateur de chaque page changera dynamiquement en fonction de l'attribut $route.meta.title.

Si nous devons modifier dynamiquement le nom de l'onglet du navigateur dans Vuex, nous pouvons utiliser la fonction de garde globale de Vue beforeEach pour modifier dynamiquement le nom de l'onglet du navigateur avant le changement de routage. Par exemple :

import router from './router'

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

Dans le code ci-dessus, nous avons enregistré un front guard global beforeEach, qui est utilisé pour modifier le nom de l'onglet du navigateur avant le changement de routage. Dans la fonction beforeEach, nous définissons l'attribut document.title sur l'attribut meta.title de la page à venir (vers). De cette façon, le nom de l'onglet du navigateur changera dynamiquement à chaque changement d'itinéraire.

Résumé

Dans le projet Vue, il existe différentes méthodes pour modifier dynamiquement les noms des onglets du navigateur. Vous pouvez choisir d'utiliser différentes méthodes en fonction de différents besoins. Quelle que soit la méthode utilisée, elle peut nous aider à mieux optimiser l'expérience utilisateur et à améliorer l'impression que l'utilisateur a du site Web.

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!