解决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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 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
php目录管理函数小结
2008/09/10 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
DOM精简教程
2006/10/03 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
详解JavaScript 的变量
2019/03/08 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
python中元类用法实例
2014/10/10 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
学生发电厂实习自我鉴定
2013/09/22 职场文书
音乐器材管理制度
2014/01/31 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
个人先进事迹材料
2014/12/29 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python