實現思路很簡單：就是利用路由的導購守衛beforeEach在每次頁面跳轉前更改對應的title

1.首先在route裡面給每個路由加上meta屬性

2.在main.js裡面加上導航守衛

router.beforeEach((to,form,next) => {
window.document.title = to.meta.title == undefined?'預設標題':to.meta.title
next()
})

補充知識：vue element tab標籤頁文字溢位時，滑鼠上去 Tooltip文字提示

重點：el-tooltip標籤內加slot=“label”

<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就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。