在vue中實現(xiàn)給每個頁面頂部設(shè)置title
更新時間：2020年07月29日 10:06:47 作者：laishaojiang
這篇文章主要介紹了在vue中實現(xiàn)給每個頁面頂部設(shè)置title，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實現(xiàn)思路很簡單：就是利用路由的導(dǎo)購守衛(wèi)beforeEach在每次頁面跳轉(zhuǎn)前更改對應(yīng)的title
1.首先在route里面給每個路由加上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ǔ)充知識：vue element tab標(biāo)簽頁文本溢出時，鼠標(biāo)上去 Tooltip文字提示
重點：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中實現(xiàn)給每個頁面頂部設(shè)置title就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目查看vue版本及cli版本的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue的axios使用post時必須使用qs.stringify而get不用問題
這篇文章主要介紹了vue的axios使用post時必須使用qs.stringify而get不用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue應(yīng)用qs插件實現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應(yīng)用qs插件實現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue中兩種生成二維碼(帶logo)并下載方式總結(jié)
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關(guān)于Vue中兩種生成二維碼(帶logo)并下載的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue3.0+vue-router+element-plus初實踐
這篇文章主要介紹了vue3.0+vue-router+element-plus初實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12![解決antd 下拉框 input [defaultValue] 的值的問題](http://img.jbzj.com/images/xgimg/bcimg5.png)
解決antd 下拉框 input [defaultValue] 的值的問題
這篇文章主要介紹了解決antd 下拉框 input [defaultValue] 的值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3+Element Plus實現(xiàn)自定義穿梭框的詳細(xì)代碼
找到一個好用的vue樹形穿梭框組件都很難,又不想僅僅因為一個穿梭框在element-ui之外其他重量級插件,本文給大家分享vue3+Element Plus實現(xiàn)自定義穿梭框的示例代碼,感興趣的朋友一起看看吧2024-01-01
在vue中使用axios實現(xiàn)post方式獲取二進(jìn)制流下載文件(實例代碼)
這篇文章主要介紹了在vue中使用axios實現(xiàn)post方式獲取二進(jìn)制流下載文件的相關(guān)資料,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了vue2.0使用swiper組件實現(xiàn)輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2018-01-01