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


Posted in Javascript onJuly 29, 2020

实现思路很简单:就是利用路由的导购守卫beforeEach在每次页面跳转前更改对应的title

1.首先在route里面给每个路由加上meta属性

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

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中实现给每个页面顶部设置title就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JS与C#编码解码
Dec 03 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
js实现自定义进度条效果
Mar 15 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 #Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 #Javascript
Element中Slider滑块的具体使用
Jul 29 #Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 #Javascript
javascript实现移动端触屏拖拽功能
Jul 29 #Javascript
Vue实现移动端拖拽交换位置
Jul 29 #Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 #Javascript
You might like
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
解析php中的escape函数
2013/06/29 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
原生实现一个react-redux的代码示例
2018/06/08 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python自动安装pip
2014/04/24 Python
Python多进程编程技术实例分析
2014/09/16 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
总经理任命书
2014/03/29 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
详解MindSpore自定义模型损失函数
2021/06/30 Python
Python 中的Sympy详细使用
2021/08/07 Python