Maison  >  Article  >  interface Web  >  Comment ajouter un titre d'en-tête de navigateur dynamique au projet Vue

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

不言
不言original
2018-07-10 17:03:452587parcourir

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

Comment ajouter un titre den-tête de navigateur dynamique au projet Vue

Comment ajouter un titre den-tête de navigateur dynamique au projet Vue

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 :

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn