基于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 限制输入脚本大全
Nov 03 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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 allow_url_include的应用和解释
2010/04/22 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js实现交通灯效果
2017/01/13 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
python 不以科学计数法输出的方法
2018/07/16 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python实现大文件分割与合并
2019/07/22 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美国现代家具购物网站:LexMod
2019/01/09 全球购物
领导证婚人证婚词
2014/01/13 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
新生开学寄语大全
2015/05/28 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
python 逐步回归算法
2021/04/06 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript