vue中動態(tài)設(shè)置meta標簽和title標簽的方法
更新時間：2018年07月11日 10:11:37 作者：dusk1712
這篇文章主要介紹了vue中動態(tài)設(shè)置meta標簽和title標簽的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
因為和原生的交互是需要h5這邊來提供meta標簽的來是來判斷要不要顯示分享按鈕，所有就需要手動設(shè)置meta標簽，標題和內(nèi)容
//router內(nèi)的設(shè)置
{
path: '/teachers',
name: 'TDetail',
component: TDetail,
meta: {
title:"教師詳情",
content: 'disable'
}
},
{
path: '/article',
name: 'Article',
component: Article,
meta: {
title: "文章詳情",
content: 'disable-no'
}
},
//main.js里面的代碼
router.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁面meta */
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
meta.content = to.meta.content;
head[0].appendChild(meta)
}
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});
效果如圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于ant-design-vue實現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue項目打包后怎樣優(yōu)雅的解決跨域,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章給大家介紹了Vue.js 表單控件操作的相關(guān)知識，本文通過實例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個文檔，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本篇文章主要介紹了jquery在vue腳手架中的使用方式示例，非常具有實用價值，需要的朋友可以參考下2017-08-08
Axios提供了簡單而強大的API來處理HTTP請求,而FormData提供了用于構(gòu)建表單數(shù)據(jù)的API,這篇文章主要介紹了Vue中如何使用Axios發(fā)送FormData請求,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了使用Vue寫一個datepicker的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01