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