怎么在Vue.js項(xiàng)目中管理頁面的頭部標(biāo)簽

怎么在Vue.js項(xiàng)目中管理頁面的頭部標(biāo)簽？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

使用router.meta

在路由里面配置每個路由的地址：

routes: [
  { /* （首頁）默認(rèn)路由地址 */
    path: '/',
    name: 'Entrance',
    component: Entrance,
    meta: {
      title: '首頁入口'
    }
  },
  { /* 修改昵稱 */
    path: '/modifyName/:nickName',
    name: 'modifyName',
    component: modifyName,
    meta: {
      title: '修改昵稱'
    }
  }
]

在每一個 meta 里面設(shè)置頁面的 title 名字，最后在遍歷

router.beforeEach((to,from, next) => {
  /* 路由發(fā)生變化修改頁面title */
  if (to.meta.title) {
   document.title = to.meta.title
  }
  next();
});

這樣就為每一個VUE 的頁面添加了title。

使用vue-meta插件

vue-meta 主要用于管理 HMTL 頭部標(biāo)簽，同時也支持 SSR。

vue-meta有以下特點(diǎn)：

• 在組件內(nèi)設(shè)置 metaInfo，便可輕松實(shí)現(xiàn)頭部標(biāo)簽的管理

• metaInfo 的數(shù)據(jù)都是響應(yīng)的，如果數(shù)據(jù)變化，頭部信息會自動更新

• 支持 SSR

在頁面里面增加 metaInfo 選項(xiàng)

export default {
 data() {
  return {
   myTitle: '標(biāo)題'
  }
 },
 metaInfo: {
  title: this.title,
  titleTemplate: '%s - by - vue-meta',
  htmlAttris: {
   lang: 'zh'
  },
  script: ''
 }
 ... ...
}

看完上述內(nèi)容，你們掌握怎么在Vue.js項(xiàng)目中管理頁面的頭部標(biāo)簽的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！