详细信息查看：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中引入
importVueWechatTitlefrom'vue-wechat-title'Vue.use(VueWechatTitle)
2、在路由文件 index.js 中给需要的路由添加 title
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/home.vue'),
meta: {
title: '首页',
keepAlive: true
}
},
{
path: '/book',
name: 'book',
component: () => import('../views/book'),
meta: {
title: '书',
keepAlive: false
}
}
]
3、在 app.vue 中修改 router-view 组件
在各个组件中随便一个标签中都可写入
<divv-wechat-title="$route.meta.title"></div>
或者
<router-viewv-wechat-title='$route.meta.title'></router-view>
若想要动态改变title值：
<divv-wechat-title="$route.meta.title={data.title}"></div>
自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的
<div v-wechat-title="$route.meta.title"img-set="/static/logo.png"></div>
book.vue样例代码如下
文档中的button使用了van组件。换成普通的button 一样。
<template>
<div>
<div v-wechat-title="$route.meta.title=title"></div>
书
<van-button type="default" click="title">默认按钮</van-button>
</div>
</template>
<script>
export default {
name: "index",
data(){
return{
title : '书11'
}
},
mounted() {
},
methods:{
title(){
this.title = 'sdfsdf'
}
}
}
</script>
<style scoped>
</style>
