在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.js中created方法作用

    vue.js中created方法作用

    这篇文章主要介绍了vue.js中created方法作用及mounted和created的区别介绍,需要的朋友可以参考下
    2018-03-03
  • Vue如何使用CSS自定义变量

    Vue如何使用CSS自定义变量

    这篇文章主要介绍了Vue如何使用CSS自定义变量,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-05-05
  • Vite3 Svelte3构建Web应用报错process is not defined

    Vite3 Svelte3构建Web应用报错process is not def

    这篇文章主要介绍了Vite3 Svelte3构建Web应用报错:'process is not defined'解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • element-ui table组件如何使用render属性的实现

    element-ui table组件如何使用render属性的实现

    这篇文章主要介绍了element-ui table组件如何使用render属性的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue.js添加组件操作示例

    Vue.js添加组件操作示例

    这篇文章主要介绍了Vue.js添加组件操作,结合实例形式分析了vue.js组件的注册、调用相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • 关于vue-admin-template模板连接后端改造登录功能

    关于vue-admin-template模板连接后端改造登录功能

    这篇文章主要介绍了关于vue-admin-template模板连接后端改造登录功能,登陆方法根据账号密码查出用户信息,根据用户id与name生成token并返回,userinfo则是对token进行获取,在查出对应值进行返回,感兴趣的朋友一起看看吧
    2022-05-05
  • 基于vue封装一个带眼睛的密码子组件

    基于vue封装一个带眼睛的密码子组件

    这篇文章给大家介绍了基于vue封装一个带眼睛的密码子组件的方法,文章中有详细的代码讲解,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • VUE:vuex 用户登录信息的数据写入与获取方式

    VUE:vuex 用户登录信息的数据写入与获取方式

    今天小编就为大家分享一篇VUE:vuex 用户登录信息的数据写入与获取方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue 中几种传值方法(3种)

    vue 中几种传值方法(3种)

    这篇文章主要介绍了vue 中几种传值方法(3种),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue第三方库中存在扩展运算符报错问题的解决方案

    vue第三方库中存在扩展运算符报错问题的解决方案

    这篇文章主要介绍了vue第三方库中存在扩展运算符报错问题,本文给大家分享解决方案,通过结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-07-07

最新评论