vue wechat title

effet

Pour les applications Vuejs monopage, le titre dans la vue Web de certaines applications sous le système iOS ne peut pas être modifié via document.title = xxx. Ce plug-in est uniquement créé pour résoudre ce problème (compatible avec Android).

APPLICATION testée

• WeChat
• QQ
• Alipay
• Taobao

Effet (veuillez utiliser n'importe quelle application de la liste ci-dessus pour scanner le code afin d'ouvrir l'expérience)

Les méthodes d'utilisation des différentes versions sont similaires mais l'effet est le même. La démo est écrite par Vuejs1.x.

Ouvrir directement : http://vue-wechat-title.deboy.cn/

Installer

Vuejs 1.x

npm install [email protected] --save

Vuejs 2.x

npm install vue-wechat-title --save

usage

Démo Vuejs 1.x

Démo Vuejs 2.x

ES6

main.js

 Vue . use ( require ( 'vue-wechat-title' ) )

Définition de l'itinéraire (n'en intercepter qu'une partie)

 // ...
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 recommande de l'utiliser globalement une seule fois. Le titre de la directive peut être défini dans vuex ou dans le routeur. Ne l'utilisez pas plusieurs fois !!

 <!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
< div v-wechat-title =" $route.meta.title " > </ div >
<!--or-->
< router-view v-wechat-title =" $route.meta.title " > </ router-view >

L'adresse de l'image chargée personnalisée est par défaut une adresse d'image base64 vide, qui peut être relative ou absolue. Notez qu'elle doit être transmise si elle est utilisée dans l'application Alipay. Il est recommandé de transmettre l'adresse du favicon telle que : /favicon.ico.

 < div v-wechat-title =" $route.meta.title " img-set =" /static/logo.png " > </ div >

Bienvenue pour soumettre PR