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

　　

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

　　

　　

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

　　

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

　　

安装 　　

<代码> npm安装vue-wechat-title——保存

　　

用法 　　

1,在main.js中引入

　　 　　 　　从“vue-wechat-title”进口VueWechatTitle 　　Vue.use (VueWechatTitle) 　　 　　

2,在路由文件索引。js中给需要的路由添加标题

　　 　　 　　路线:[{ 　　路径:“/? 　　名称:“JmCon”, 　　组件:JmCon, 　　元:{ 　　keepAlive:真 　　} 　　}, { 　　路径:/明细, 　　名称:“TopicDetail”, 　　组件:TopicDetail, 　　元:{ 　　标题:“着迷网话题详情页”, 　　keepAlive:假 　　} 　　} 　　) 　　 　　

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

　　

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

　　

<代码> & lt; div v-wechat-title=" $ route.meta.title "祝辞& lt;/div>

　　

或者 　　

<代码> & lt; router-view v-wechat-title=route.meta.title美元的祝辞& lt;/router-view>

　　

若想要动态改变标题值:

　　

<代码> & lt; div v-wechat-title=" $ route.meta.title={data.title} "祝辞& lt;/div>

　　

自定义加载的图片地址默认是。/标识。图标可以是相对或者绝对的

　　

<代码> & lt; div v-wechat-title=" route.meta美元。标题/静态/logo.png“img-set=祝辞& lt;/div>

　　

汇总: 　　

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

　　

<代码> & lt; div类=v-wechat-title=皌opicdetail route.meta.title=topicinfo美元。主题“img-set="
　　

　　

　　

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

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