Comment modifier le titre de la page dans vue.js

Comment modifier le titre de la page dans vue.js : 1. Ajoutez le titre à la route requise dans le fichier de routage index.js 2. Traitez-le dans l'intercepteur beforeEach de la route.

L'environnement d'exploitation de cet article : système windows10, vue.js 2.9, ordinateur thinkpad t480.

Lors de l'ouverture d'une page Web, la page Web aura un titre par défaut. Lorsque nous chargeons un contenu de page différent, le titre doit être modifié, par exemple de la page d'accueil à la page de détails, puis de la page de détails au centre personnel, etc.

Il existe de nombreuses façons de nous aider à modifier le titre de la page Web. Nous présenterons ici deux options.

Option 1 (non recommandée) :

Combiné au business, attribuer directement une valeur à document.title dans la fonction de cycle de vie Vue créée.

<script>
import axios from &#39;axios&#39;
export default {
  created () {
    document.title = &#39;功能授权&#39;
  }
}
</script>

L'option 2 utilise l'interception beforeEach de Vue-Router

Vue Router est utilisé dans le projet et le titre est ajouté à la route requise dans le fichier de routage index.js.

routes: [{
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/index'),
      meta:{
        title: '首页',
        keepAlive: true
      }
    },
    {
      path: '/person/auth,
      name: 'personAuth',
      component: () => import('@/pages/person/auth),
      meta:{
        title: '个人中心',
        keepAlive: false
      }
    }
  ]

Traité dans le beforeEach intercepteur de la route

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

Apprentissage recommandé : Formation php

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!