在 Vue SPA 應用中，如果想要修改 HTML 的頭部標簽，如頁面的 title ，我們只能去修改 index.html 模板文件，但是這個是全局的修改，如何為每個頁面都設置不一樣的 title 呢？下面介紹兩種方法。

使用router.Meta

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

首頁)默認路由地址 */

path: '/',name: 'Entrance',component: Entrance,Meta: {

title: '首頁入口'

}

},{ /* 修改昵稱 */

path: '/modifyName/:nickName',name: 'modifyName',component: modifyName,Meta: {

title: '修改昵稱'

}

}

]

在每一個 Meta 里面設置頁面的 title 名字，最后在遍歷

{

/* 路由發生變化修改頁面title */

if (to.Meta.title) {

document.title = to.Meta.title

}

next();

});

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

使用vue-Meta插件

vue-Meta 主要用于管理 HMTL 頭部標簽，同時也支持 SSR。

vue-Meta有以下特點：

在組件內設置 MetaInfo，便可輕松實現頭部標簽的管理

MetaInfo 的數據都是響應的，如果數據變化，頭部信息會自動更新

支持 SSR

在頁面里面增加 MetaInfo 選項

標題'

}

},MetaInfo: {

title: this.title,titleTemplate: '%s - by - vue-Meta',htmlAttris: {

lang: 'zh'

},script: ''

}

... ...

}

更多vue-Meta使用請參考Github官網： nofollow" href="https://github.com/declandewet/vue-Meta">https://github.com/declandewet/vue-Meta

總結

以上所述是小編給大家介紹的Vue.js項目中管理每個頁面的頭部標簽的兩種方法。編程之家 jb51.cc 收集整理的教程希望能對你有所幫助，如果覺得編程之家不錯，可分享給好友！感謝支持。

總結

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

總結

以上是生活随笔為你收集整理的多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。