在vue中實(shí)現(xiàn)給每個(gè)頁(yè)面頂部設(shè)置title
更新時(shí)間：2020年07月29日 10:06:47 作者：laishaojiang
這篇文章主要介紹了在vue中實(shí)現(xiàn)給每個(gè)頁(yè)面頂部設(shè)置title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
實(shí)現(xiàn)思路很簡(jiǎn)單：就是利用路由的導(dǎo)購(gòu)守衛(wèi)beforeEach在每次頁(yè)面跳轉(zhuǎn)前更改對(duì)應(yīng)的title
1.首先在route里面給每個(gè)路由加上meta屬性
2.在main.js里面加上導(dǎo)航守衛(wèi)
router.beforeEach((to,form,next) => {
window.document.title = to.meta.title == undefined?'默認(rèn)標(biāo)題':to.meta.title
next()
})
補(bǔ)充知識(shí)：vue element tab標(biāo)簽頁(yè)文本溢出時(shí)，鼠標(biāo)上去 Tooltip文字提示
重點(diǎn)：el-tooltip標(biāo)簽內(nèi)加slot=“l(fā)abel”
<el-tooltip class="item-tabs" effect="dark" :content="item.stationName" placement="bottom-start" slot="label">
<span>{{item.stationName}}</span>
</el-tooltip>
<div class="left">
<el-tabs tab-position="left" class="flex tooltitle tabsClass" @tab-click="handleClick" >
<el-tab-pane v-for="(item,index) in chargingStatusTitle" :key="index">
<el-tooltip class="item-tabs" effect="dark" :content="item.stationName" placement="bottom-start" slot="label">
<span>{{item.stationName}}</span>
</el-tooltip>
<div class="content" >
</div>
</el-tab-pane>
</el-tabs >
</div>
以上這篇在vue中實(shí)現(xiàn)給每個(gè)頁(yè)面頂部設(shè)置title就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue.js中created方法作用及mounted和created的區(qū)別介紹，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
Vite3 Svelte3構(gòu)建Web應(yīng)用報(bào)錯(cuò)process is not def
這篇文章主要介紹了Vite3 Svelte3構(gòu)建Web應(yīng)用報(bào)錯(cuò)：'process is not defined'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
element-ui table組件如何使用render屬性的實(shí)現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Vue.js添加組件操作,結(jié)合實(shí)例形式分析了vue.js組件的注冊(cè)、調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號(hào)密碼查出用戶(hù)信息，根據(jù)用戶(hù)id與name生成token并返回，userinfo則是對(duì)token進(jìn)行獲取，在查出對(duì)應(yīng)值進(jìn)行返回，感興趣的朋友一起看看吧2022-05-05
這篇文章給大家介紹了基于vue封裝一個(gè)帶眼睛的密碼子組件的方法,文章中有詳細(xì)的代碼講解,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
VUE:vuex 用戶(hù)登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式
今天小編就為大家分享一篇VUE:vuex 用戶(hù)登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue 中幾種傳值方法(3種),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue第三方庫(kù)中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問(wèn)題的解決方案
這篇文章主要介紹了vue第三方庫(kù)中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問(wèn)題,本文給大家分享解決方案，通過(guò)結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07