Comment ajouter un titre d'en-tête de navigateur dynamique au projet Vue

Cet article présente principalement la question de savoir comment ajouter un titre d'en-tête de navigateur dynamique dans le projet Vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. 0 . Téléchargez directement le lien d'aperçu + rendu

Projet Vue pour ajouter un titre d'en-tête de navigateur dynamique

1. Idée

• ( 1) Obtenez le titre du composant à partir du routeur de routage

• ( 2) Enregistrez le titre dans vuex (ce projet a encapsulé les h5 sessionStorage et localStorage peuvent également être stockés ici)

• (3) Définir le titre

(1) Obtenir le titre du composant à partir du routage routeur

À l'intérieur router.beforeEach((to, from, next) => {}

const browserHeaderTitle = to.name

(2) Le titre est stocké dans vuex

 SET_BROWSERHEADERTITLE: (state, action) => {
      state.browserHeaderTitle = action.browserHeaderTitle
    }

 store.commit('SET_BROWSERHEADERTITLE', {
      browserHeaderTitle: browserHeaderTitle
    })

(3) Définir le titre

Nous définissons après le titre de routage

/**
 * 设置浏览器头部标题
 */
export const setTitle = function(title) {
  title = title ? `${title}` : 'NxAdmin'
  window.document.title = title
}

router.afterEach(() => {
  NProgress.done() // 结束Progress
  setTimeout(() => {
    const browserHeaderTitle = store.getters.browserHeaderTitle
    setTitle(browserHeaderTitle)
  }, 0)
})

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème selon lequel le plug-in mui-silder dans vue+mui n'est pas valide et ne peut pas être déplacé

Comment laisser le composant axios de vue et le backend PHP échanger des données

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!