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