在vue中實(shí)現(xiàn)給每個頁面頂部設(shè)置title

更新時間：2020年07月29日 10:06:47 作者：laishaojiang

這篇文章主要介紹了在vue中實(shí)現(xiàn)給每個頁面頂部設(shè)置title，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

實(shí)現(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文字提示

重點(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)給每個頁面頂部設(shè)置title就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式
這篇文章主要介紹了vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue的axios使用post時必須使用qs.stringify而get不用問題
這篇文章主要介紹了vue的axios使用post時必須使用qs.stringify而get不用問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應(yīng)用qs插件實(shí)現(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初實(shí)踐
這篇文章主要介紹了vue3.0+vue-router+element-plus初實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
解決antd 下拉框 input [defaultValue] 的值的問題
這篇文章主要介紹了解決antd 下拉框 input [defaultValue] 的值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的詳細(xì)代碼
找到一個好用的vue樹形穿梭框組件都很難,又不想僅僅因?yàn)橐粋€穿梭框在element-ui之外其他重量級插件,本文給大家分享vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的示例代碼,感興趣的朋友一起看看吧
2024-01-01
在vue中使用axios實(shí)現(xiàn)post方式獲取二進(jìn)制流下載文件(實(shí)例代碼)
這篇文章主要介紹了在vue中使用axios實(shí)現(xiàn)post方式獲取二進(jìn)制流下載文件的相關(guān)資料,需要的朋友可以參考下
2019-12-12
vue2.0使用swiper組件實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了vue2.0使用swiper組件實(shí)現(xiàn)輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
vue2.0 better-scroll 實(shí)現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實(shí)現(xiàn)移動端滑動的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2018-01-01