多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 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项目中管理每个页面的头部标签的两种方法...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： node --- 在node中使用mo
- 下一篇： vue实现导出excel的两种方式