Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)
已测试APP
- 微信
- 支付宝
- 淘宝
不同版本使用方法类似 但是效果是一样的 demo是Vuejs1.x写的
直接打开: http://vue-wechat-title.deboy.cn/
Vuejs 1.x
npm install vue-wechat-title@1.0.7 --save
Vuejs 2.x
npm install vue-wechat-title --save
main.js
Vue.use(require('vue-wechat-title'))
路由定义(只截取一部分)
// ... const routes = [ { name: 'Home', path: '/home', meta: { title: '首页' }, component: require('../views/Home.vue') }, { name: 'Order', path: '/order', meta: { title: '订单' }, component: require('../views/Order.vue') }, { name: 'UCenter', path: '/ucenter', meta: { title: '用户中心' }, component: require('../views/UCenter.vue') } ] // ...
App.vue 建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!!
<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 --> <div v-wechat-title="$route.meta.title"></div> <!--or--> <router-view v-wechat-title="$route.meta.title"></router-view>
自定义加载的图片地址,默认是一个空的base64图片地址,可以是相对或者绝对的,注意如果要在支付宝App内使用必须传,建议传favicon地址 如:/favicon.ico
<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>