在vue中实现给每个页面顶部设置title

实现思路很简单：就是利用路由的导购守卫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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。