怎么在Vue.js項目中管理頁面的頭部標(biāo)簽
怎么在Vue.js項目中管理頁面的頭部標(biāo)簽？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
大荔網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),大荔網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為大荔成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的大荔做網(wǎng)站的公司定做！
使用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有以下特點：
在組件內(nèi)設(shè)置 metaInfo，便可輕松實現(xiàn)頭部標(biāo)簽的管理
metaInfo 的數(shù)據(jù)都是響應(yīng)的，如果數(shù)據(jù)變化，頭部信息會自動更新
支持 SSR
在頁面里面增加 metaInfo 選項
export default {
data() {
return {
myTitle: '標(biāo)題'
}
},
metaInfo: {
title: this.title,
titleTemplate: '%s - by - vue-meta',
htmlAttris: {
lang: 'zh'
},
script: ''
}
... ...
}看完上述內(nèi)容，你們掌握怎么在Vue.js項目中管理頁面的頭部標(biāo)簽的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
分享名稱：怎么在Vue.js項目中管理頁面的頭部標(biāo)簽
文章網(wǎng)址：http://www.jiaotiyi.com/article/ihpcgd.html