vue wechat title

효과

Vuejs 단일 페이지 애플리케이션의 경우 iOS 시스템의 일부 APP의 웹뷰 제목은 document.title = xxx를 통해 수정할 수 없습니다. 이 플러그인은 이 문제를 해결하기 위해서만 생성되었습니다(Android와 호환 가능).

테스트된 앱

• 위챗
• QQ
• 알리페이
• 타오바오

효과(위 목록에 있는 앱을 사용하여 코드를 스캔하여 경험을 열어주세요)

다양한 버전의 사용 방법은 비슷하지만 효과는 동일합니다. 데모는 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 데모

Vuejs 2.x 데모

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 또는 라우터에서 정의할 수 있습니다. 여러 번 사용하지 마세요.

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

로드된 이미지 주소를 사용자 정의합니다. 기본값은 상대 또는 절대 주소일 수 있습니다. Alipay 앱에서 사용하려면 다음과 같은 파비콘 주소를 전달하는 것이 좋습니다. /favicon.ico

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

PR 제출을 환영합니다