在vue中實現給每個頁面頂部設置title
更新時間:2020年07月29日 10:06:47 作者:laishaojiang
這篇文章主要介紹了在vue中實現給每個頁面頂部設置title,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
實現思路很簡單:就是利用路由的導購守衛(wèi)beforeEach在每次頁面跳轉前更改對應的title
1.首先在route里面給每個路由加上meta屬性

2.在main.js里面加上導航守衛(wèi)
router.beforeEach((to,form,next) => {
window.document.title = to.meta.title == undefined?'默認標題':to.meta.title
next()
})
補充知識:vue element tab標簽頁文本溢出時,鼠標上去 Tooltip文字提示
重點:el-tooltip標簽內加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中實現給每個頁面頂部設置title就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vite3 Svelte3構建Web應用報錯process is not def
這篇文章主要介紹了Vite3 Svelte3構建Web應用報錯:'process is not defined'解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06
element-ui table組件如何使用render屬性的實現
這篇文章主要介紹了element-ui table組件如何使用render屬性的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
關于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關于vue-admin-template模板連接后端改造登錄功能,登陸方法根據賬號密碼查出用戶信息,根據用戶id與name生成token并返回,userinfo則是對token進行獲取,在查出對應值進行返回,感興趣的朋友一起看看吧2022-05-05

