基于Vue的SPA动态修改页面title的方法(推荐)


Posted in Javascript onJanuary 02, 2018

最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果。百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了。网上有几种方案:

1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改

缺点:App.Vue默认的el只是body的一个DIV,这样干需要绑定整个html

2,通过自定义指令实现

Vue.directive('title', {
 inserted: function (el, binding) {
 document.title = el.innerText
 el.remove()
 }
})

调用方法: <div v-title>标题内容</div>

优点:这样自定义程度较大(暂且不讨论IOS微信端是否能修改成功)

缺点:无法满足某些JS方法中修改页面标题的需求,例如页面为一个websocket的页面,收到消息要动态显示页面标题这时候频繁去修改div绑定的text并不恰当

针对网上查到的上面两种方法,我进行了合并,利用vue的插件实现SPA的页面标题修改:

var plugin={};
plugin.install=function(Vue,options){
 Vue.prototype.$title=function(title){
  document.title=title;
  var iframe=document.createElement("iframe");
  iframe.style.display='none';
  iframe.setAttribute('src','/e.png');
  var loadedCallback=()=>{
   iframe.removeEventListener('load',loadedCallback);
   document.body.removeChild(iframe);
  };
  iframe.addEventListener('load',loadedCallback);
  document.body.appendChild(iframe);
 };
};
module.exports=plugin;

调用方法: this.$title('xxxxxx'); 当然你可以替换为一个绑定的变量,然后watch进行实时调整。

ps:Vue Spa切换页面时更改标题

在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx";

随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖。

<script>
export default {
  data(){
    return{
    }
  },
  created(){
    document.title="首页"
  },
}
</script>

于是在github上找到一个好用的东西 vue-wechat-title

通过 npm install vue-wechat-title  安装

引入需要的vue-router与页面需要的组件之后

const router = new VueRouter({
  mode: 'history',
  routes:[
    {
    name: 'index',
    path: '/',
    meta: {
        title: '首页'
     },
     component: index
    },
   {
     name: 'root',
     path: '/root', 
     meta: {
        title: '肉特'
    },
    component: root
    }  
 ]
});
Vue.use(require('vue-wechat-title')); //实例化参数

在组件中顶部添加一段 <div v-wechat-title="$route.meta.title"></div>

即可实现改变title效果。

Javascript 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 #Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 #Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 #Javascript
基于jquery.page.js实现分页效果
Jan 01 #jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
You might like
详解PHP处理密码的几种方式
2016/11/30 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
php自动加载代码实例详解
2021/02/26 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Prototype如何更新局部页面
2013/03/03 面试题
实习生岗位职责
2014/04/12 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
入党推优材料
2014/06/02 职场文书
艾滋病宣传标语
2014/06/25 职场文书
自荐信格式模板
2015/03/27 职场文书
退货证明模板
2015/06/23 职场文书
简爱读书笔记
2015/06/26 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书