vue 如何添加全局函数或全局变量以及单页面的title设置总结

 更新时间:2017年06月01日 10:12:09   作者:莎莉哇  
本篇文章主要介绍了vue 如何添加全局函数或全局变量以及单页面的title设置总结,非常具有实用价值,需要的朋友可以参考下

传统的设置title的方法是:document.title = ‘title'

但是这种写法在iOS的微信上是不兼容的

这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法

首先在index.html中定义一个全局的函数:

var setTitle = function (title) {
     var u = navigator.userAgent
     var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
     var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
     if (isAndroid) {
      document.title = title
     } else if (isiOS) {
      var $body = $('body')
      document.title = title
      var $iframe = $('<iframe src="/favicon.ico"></iframe>')
      $iframe.on('load', function () {
       window.setTimeout(function () {
        $iframe.off('load').remove()
       }, 0)
      }).appendTo($body)
     }
    }

然后再需要设置title的组件里面调用这个方法即可

写法是:

setTitle('XXOO')

这样的话就行了

全局变量的设置也一样,这里就不多说了……

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅谈VUE uni-app 基础组件

    浅谈VUE uni-app 基础组件

    这篇文章主要介绍了uni-app 的基础组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • 解决vue组件中使用v-for出现告警问题及v for指令介绍

    解决vue组件中使用v-for出现告警问题及v for指令介绍

    这篇文章主要介绍了解决vue组件中使用v-for出现告警问题,在文中给大家介绍了v for指令,需要的朋友可以参考下
    2017-11-11
  • 解决Vue调用springboot接口403跨域问题

    解决Vue调用springboot接口403跨域问题

    这篇文章主要介绍了解决Vue调用springboot接口403跨域问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue中实现路由跳转传参的4种方式

    Vue中实现路由跳转传参的4种方式

    本文详尽的讲了在Vue项目中,如何实现路由跳转传参的4四种方式(2大路由跳转方式,每种方式包括4种路由传参实现形式),以及每种方式中实现路由跳转包括路由传参的方法的各种写法,需要的朋友可以参考下
    2024-04-04
  • Vue调用后端java接口的实例代码

    Vue调用后端java接口的实例代码

    今天小编就为大家分享一篇Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

    Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

    文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一些配置项,如格式化表头日期、设置甘特图尺寸、启用只读模式、设置表格列等,感兴趣的朋友一起看看吧
    2025-02-02
  • vue之数据代理详解

    vue之数据代理详解

    这篇文章主要为大家介绍了vue之数据代理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 详解Vue中使用v-for语句抛出错误的解决方案

    详解Vue中使用v-for语句抛出错误的解决方案

    本篇文章主要介绍了详解Vue中使用v-for语句抛出错误的解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue 2.0 购物车小球抛物线的示例代码

    vue 2.0 购物车小球抛物线的示例代码

    本篇文章主要介绍了vue 2.0 购物车小球抛物线的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue头像处理方案小结

    Vue头像处理方案小结

    这篇文章主要介绍了Vue头像处理方案,实现思路主要是通过获取后台返回头像url,判断图片宽度,高度。具体实例代码大家参考下本文
    2018-07-07

最新评论