vue動(dòng)態(tài)設(shè)置頁(yè)面title的方法實(shí)例
更新時(shí)間：2020年08月23日 15:47:54 作者：Levy
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)設(shè)置頁(yè)面title的相關(guān)資料，文中通過(guò)實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了Vue動(dòng)態(tài)修改title的方法，需要的朋友可以參考學(xué)習(xí)，方法如下：
1.通過(guò)自定義指令去修改（單個(gè)修改比較好）
//1.在main.js 頁(yè)面里添加自定義指令
Vue.directive('title', {//單個(gè)修改標(biāo)題
inserted: function (el, binding) {
document.title = el.dataset.title
}
})
//2.在需要修改的頁(yè)面里添加v-title 指令
<div v-title data-title="我是新的標(biāo)題"></div>.
2.使用插件 vue-wechat-title
//1.安裝插件
npm vue-wechat-title --save
//2.在main.js里面引入插件
import VueWechatTitle from 'vue-wechat-title'//動(dòng)態(tài)修改title
Vue.use(VueWechatTitle)
//3.在路由里面 添加title
routes: [{
path: '/login',
component: Login,
meta: {
title: '登錄'
}
}, {
path: '/home',
component: Home,
meta: {
title: '首頁(yè)'
}
},]
//4.在app.vue 中添加 指令 v-wechat-title
<router-view v-wechat-title='$route.meta.title' />
3.通過(guò) router.beforeEach 導(dǎo)航守衛(wèi)來(lái)修改
//1.在router的index里寫(xiě)自己的路徑和title
const router = new Router({
routes: [
{
path: '/login',
component: Login,
meta: {
title: '登錄',
},
},
{
path: '/home',
component: Home,
meta: {
title: '首頁(yè)',
},
},
],
})
//2.使用router.beforeEach對(duì)路由進(jìn)行遍歷，設(shè)置title
router.beforeEach((to, from, next) => {
//beforeEach是router的鉤子函數(shù)，在進(jìn)入路由前執(zhí)行
if (to.meta.title) {
//判斷是否有標(biāo)題
console.log(to.meta.title)
document.title = to.meta.title
} else {
document.title = '默認(rèn)title'
}
next()
})
4.使用 vue-mate 修改 title
https://github.com/declandewet/vue-meta 文檔中比較詳細(xì)地說(shuō)明了在瀏覽器端和服務(wù)器端如何使用 vue-meta 修改頁(yè)面頭部信息
總結(jié)
到此這篇關(guān)于vue動(dòng)態(tài)設(shè)置頁(yè)面title的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)設(shè)置頁(yè)面title內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue中通過(guò)Mustache模板引擎將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache模板引擎插值語(yǔ)法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了通過(guò)原生vue添加滾動(dòng)加載更多功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
WebRTC作為一種開(kāi)放標(biāo)準(zhǔn)的實(shí)時(shí)通信協(xié)議,能輕松實(shí)現(xiàn)瀏覽器之間的實(shí)時(shí)音視頻通信,本次主要分享基于WebRTC的音視頻通話技術(shù),講解WebRTC原理和音視頻傳輸?shù)汝P(guān)鍵概念,通過(guò)案例實(shí)踐,帶大家掌握如何搭建一個(gè)音視頻通話應(yīng)用,需要的朋友可以參考下2024-05-05
Vue實(shí)現(xiàn)路由懶加載的多種方式總結(jié)
當(dāng)構(gòu)建的項(xiàng)目比較大的時(shí)候,懶加載可以分割代碼塊,提高頁(yè)面的初始加載效率解決白屏問(wèn)題,下面是幾種常見(jiàn)vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧2023-11-11
關(guān)于Vue項(xiàng)目跨平臺(tái)運(yùn)行問(wèn)題的解決方法
這篇文章主要介紹了關(guān)于Vue項(xiàng)目跨平臺(tái)運(yùn)行問(wèn)題的解決方法，特別記錄一下踩的坑，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要給大家介紹了關(guān)于Uniapp設(shè)置頁(yè)面的背景圖片,uni-app中設(shè)置背景圖有兩種方式,分別是全局設(shè)置和在相應(yīng)的view內(nèi)設(shè)置背景,文中給出了代碼示例,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了深入理解vue Render函數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
在Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟
在工作中遇到需要前端上傳excel文件獲取到相應(yīng)數(shù)據(jù)處理之后傳給后端并且展示上傳文件的數(shù)據(jù),所以本文就來(lái)給大家介紹一下Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟,需要的朋友可以參考下2023-08-08
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04