Vue.js項(xiàng)目中管理每個(gè)頁(yè)面的頭部標(biāo)簽的兩種方法
在 Vue SPA 應(yīng)用中，如果想要修改 HTML 的頭部標(biāo)簽，如頁(yè)面的 title ，我們只能去修改 index.html 模板文件，但是這個(gè)是全局的修改，如何為每個(gè)頁(yè)面都設(shè)置不一樣的 title 呢？下面介紹兩種方法。
使用router.meta
在路由里面配置每個(gè)路由的地址：
routes: [
{ /* （首頁(yè)）默認(rèn)路由地址 */
path: '/',
name: 'Entrance',
component: Entrance,
meta: {
title: '首頁(yè)入口'
}
},
{ /* 修改昵稱 */
path: '/modifyName/:nickName',
name: 'modifyName',
component: modifyName,
meta: {
title: '修改昵稱'
}
}
]
在每一個(gè) meta 里面設(shè)置頁(yè)面的 title 名字，最后在遍歷
router.beforeEach((to,from, next) => {
/* 路由發(fā)生變化修改頁(yè)面title */
if (to.meta.title) {
document.title = to.meta.title
}
next();
});
這樣就為每一個(gè)VUE 的頁(yè)面添加了title。
使用vue-meta插件
vue-meta 主要用于管理 HMTL 頭部標(biāo)簽，同時(shí)也支持 SSR。
vue-meta有以下特點(diǎn)：
- 在組件內(nèi)設(shè)置 metaInfo，便可輕松實(shí)現(xiàn)頭部標(biāo)簽的管理
- metaInfo 的數(shù)據(jù)都是響應(yīng)的，如果數(shù)據(jù)變化，頭部信息會(huì)自動(dòng)更新
- 支持 SSR
在頁(yè)面里面增加 metaInfo 選項(xiàng)
export default {
data() {
return {
myTitle: '標(biāo)題'
}
},
metaInfo: {
title: this.title,
titleTemplate: '%s - by - vue-meta',
htmlAttris: {
lang: 'zh'
},
script: ''
}
... ...
}
更多vue-meta使用請(qǐng)參考Github官網(wǎng)： https://github.com/declandewet/vue-meta
總結(jié)
以上所述是小編給大家介紹的Vue.js項(xiàng)目中管理每個(gè)頁(yè)面的頭部標(biāo)簽的兩種方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了vue如何在自定義組件中使用v-model，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
本篇文章通過(guò)實(shí)例給大家分享了vue自動(dòng)化表單的操作方法以及相關(guān)的代碼做了描述，有興趣的朋友可以跟著學(xué)習(xí)下。2018-05-05
這篇文章主要介紹了簡(jiǎn)單的vuex 的使用案例筆記,本文通過(guò)demo 是一個(gè) 改變 app 的模式 的一個(gè)appellation ，選擇是 夜間模式還是白天模式，具體代碼大家參考下本文2018-04-04
詳解刷新頁(yè)面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁(yè)面的解決
這篇文章主要介紹了詳解刷新頁(yè)面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁(yè)面的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了?Vue路由跳轉(zhuǎn)步驟詳解，主要介紹當(dāng)訪問(wèn)API成功后跳轉(zhuǎn)到新的Vue頁(yè)面怎么處理，感興趣的朋友跟隨小編一起看看吧2023-07-07
LRU算法在Vue內(nèi)置組件keep-alive中的使用
LRU算法全稱為least recently use 最近最少使用，核心思路是最近被訪問(wèn)的以后被訪問(wèn)的概率會(huì)變高，那么可以把之前沒被訪問(wèn)的進(jìn)行刪除，維持一個(gè)穩(wěn)定的最大容量值，從而不會(huì)導(dǎo)致內(nèi)存溢出。2021-05-05
vue3封裝Element導(dǎo)航菜單的實(shí)例代碼
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實(shí)例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue3中結(jié)合ElementPlus實(shí)現(xiàn)彈窗的封裝方式
這篇文章主要介紹了Vue3中結(jié)合ElementPlus實(shí)現(xiàn)彈窗的封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
在Vue中，組件是構(gòu)建用戶界面的基本單位，封裝公共組件是一種良好的實(shí)踐，可以提高代碼的可復(fù)用性和可維護(hù)性，下面我們就來(lái)看看如何封裝一個(gè)公共的按鈕組件吧2023-08-08