在vue中实现给每个页面顶部设置title
更新时间：2020年07月29日 10:06:47 作者：laishaojiang
这篇文章主要介绍了在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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue移动端自适应适配问题，本文通过实例代码详解给大家介绍的非常详细，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了vue3.x ref()语法糖赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
从零开始学Vue，通过一些例子，让大家概览一些基本的概念和特性，理解Vue的基础知识,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了vue+vue-validator 表单验证功能的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
本篇文章主要介绍了vue页面使用阿里oss上传功能的实例（一），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了如何写一个 Vue3 的自定义指令，如果我们想在 Vue.js 的项目中实现图片懒加载，那么用自定义指令就再合适不过了，那么接下来就让我手把手带你用 Vue3 去实现一个图片懒加载的自定义指令 v-lazy,需要的朋友可以参考一下2022-01-01
这篇文章主要介绍了详解express鉴权，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了Vue组件之Tooltip的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Vue如何监听元素宽高变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue截取视频第一帧的图片问题,基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可，需要的朋友可以参考下2022-11-11
最新评论