基于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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jquery高效反选具体实现
May 05 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
详解js前端代码异常监控
Jan 11 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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日历[测试通过]
2008/03/27 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php的hash算法介绍
2014/02/13 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
PHP实现图片压缩
2020/09/09 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
解决python 上传图片限制格式问题
2019/10/30 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python 爬虫的原理
2020/07/30 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
图书室标语
2014/06/21 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2015年底工作总结范文
2015/05/15 职场文书