在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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
详解vue表单——小白速看
Apr 08 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
微信小程序组件传值图示过程详解
Jul 31 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 上传文件大小限制
2009/07/05 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
Javascript浅谈之this
2013/12/17 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Python线程详解
2015/06/24 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python实现自动登录
2018/09/17 Python
Python绘制股票移动均线的实例
2019/08/24 Python
python 魔法函数实例及解析
2019/09/25 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python如何实现图片压缩
2020/09/11 Python
Python的logging模块基本用法
2020/12/24 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
司法建议书范文
2014/05/13 职场文书
学校端午节活动方案
2014/08/23 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年社区工作总结
2014/11/18 职场文书
盲山观后感
2015/06/11 职场文书
军训后的感想
2015/08/07 职场文书