vue wechat title

作用

Vuejs 單頁應用在iOS系統下部分APP的webview中標題不能透過document.title = xxx 的方式修改該插件只為解決該問題而生(兼容安卓)

已測試APP

• 微信
• QQ
• 支付寶
• 淘寶

效果(請使用以上清單中任一個APP掃碼開啟體驗)

不同版本使用方法類似但是效果是一樣的demo是Vuejs1.x寫的

直接開啟: http://vue-wechat-title.deboy.cn/

安裝

Vuejs 1.x

npm install [email protected] --save

Vuejs 2.x

npm install vue-wechat-title --save

用法

Vuejs 1.x demo

Vuejs 2.x demo

ES6

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 >

歡迎提交PR