Vue.js項(xiàng)目中管理每個(gè)頁面的頭部標(biāo)簽的兩種方法
在 Vue SPA 應(yīng)用中，如果想要修改 HTML 的頭部標(biāo)簽，如頁面的 title ，我們只能去修改 index.html 模板文件，但是這個(gè)是全局的修改，如何為每個(gè)頁面都設(shè)置不一樣的 title 呢？下面介紹兩種方法。
使用router.meta
在路由里面配置每個(gè)路由的地址：
routes: [
{ /* （首頁）默認(rèn)路由地址 */
path: '/',
name: 'Entrance',
component: Entrance,
meta: {
title: '首頁入口'
}
},
{ /* 修改昵稱 */
path: '/modifyName/:nickName',
name: 'modifyName',
component: modifyName,
meta: {
title: '修改昵稱'
}
}
]
在每一個(gè) meta 里面設(shè)置頁面的 title 名字，最后在遍歷
router.beforeEach((to,from, next) => {
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title
}
next();
});
這樣就為每一個(gè)VUE 的頁面添加了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ù)變化，頭部信息會自動(dòng)更新
- 支持 SSR
在頁面里面增加 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使用請參考Github官網(wǎng)： https://github.com/declandewet/vue-meta
總結(jié)
以上所述是小編給大家介紹的Vue.js項(xiàng)目中管理每個(gè)頁面的頭部標(biāo)簽的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式
這篇文章主要介紹了vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目中的遇錯(cuò):Invalid?Host?header問題
這篇文章主要介紹了vue項(xiàng)目中的遇錯(cuò):Invalid?Host?header問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue移動(dòng)端如何解決click事件延遲,封裝tap等事件
這篇文章主要介紹了vue移動(dòng)端如何解決click事件延遲，封裝tap等事件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
VUE 配置vue-devtools調(diào)試工具及安裝方法
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。這篇文章主要介紹了VUE 配置vue-devtools調(diào)試工具及安裝步驟 ,需要的朋友可以參考下2018-09-09
在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明
這篇文章主要介紹了在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號
這篇文章主要介紹了關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號,通過給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對象,感興趣的朋友可以學(xué)習(xí)一下2023-04-04
vue element ui使用選擇器實(shí)現(xiàn)地區(qū)選擇兩種方法
這篇文章主要給大家介紹了關(guān)于vue element ui使用選擇器實(shí)現(xiàn)地區(qū)選擇的兩種方法,Element UI是一套基于Vue.js開發(fā)的UI組件庫,其中包含了地區(qū)選擇器(Cascader)組件,需要的朋友可以參考下2023-09-09
vuex 中輔助函數(shù)mapGetters的基本用法詳解
mapGetters輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性，在組件或界面中不使用mapGetter調(diào)用映射vuex中的getter，在組件或界面中使用mapGetter調(diào)用映射vuex中的getter，具體內(nèi)容跟隨小編一起通過本文學(xué)習(xí)吧2021-07-07
Axios?是一個(gè)簡單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡單易用的庫，這篇文章主要介紹了vue3-HTTP請求之a(chǎn)xios,需要的朋友可以參考下2022-12-12