解决vue单页面应用中动态修改title问题


Posted in Javascript onJune 09, 2019

详细信息查看:vue-weachat-title

解决问题:

1、Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

2、在vue单页面中,通过浏览器分享到QQ、微信等应用中的链接,只有一个首页标题和默认icon图片
已测试:APP 微信 QQ 支付宝 淘宝

安装

npm install vue-wechat-title --save

用法

1、在main.js中引入

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

2、在路由文件 index.js 中给需要的路由添加 title

routes: [{
   path: '/',
   name: 'JmCon',
   component: JmCon,
   meta:{
    keepAlive: true
   }
  },  {
   path: '/detail',
   name: 'TopicDetail',
   component: TopicDetail,
   meta:{
    title: '着迷网话题详情页',
    keepAlive: false
   }
  }
 ]

3、在 app.vue 中修改 router-view 组件

在各个组件中随便一个标签中都可写入

<div v-wechat-title="$route.meta.title"></div>

或者

<router-view v-wechat-title='$route.meta.title'></router-view>

若想要动态改变title值:

<div v-wechat-title="$route.meta.title={data.title}"></div>

自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的

<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>

汇总:

在详情页中使用,根据不同的文章内容,分享出去的文章标题和图片都不同

<div class="topicdetail" v-wechat-title="$route.meta.title=topicinfo.subject" img-set="top

总结

以上所述是小编给大家介绍的解决vue单页面应用中动态修改title问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 #Javascript
详解Node.js异步处理的各种写法
Jun 09 #Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 #Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 #Javascript
微信小程序与webview交互实现支付功能
Jun 07 #Javascript
在微信小程序中使用vant的方法
Jun 07 #Javascript
微信小程序实现折线图的示例代码
Jun 07 #Javascript
You might like
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python实现KNN分类算法
2019/10/16 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
运动会广播稿200字
2014/10/18 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
邀请函样本
2015/02/02 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书