vue single-page application to dynamically modify the title

https://www.jianshu.com/p/b980725b62e8

https://www.npmjs.com/package/vue-wechat-title

For more information see: VUE-weachat-title
solve the problem:
1, Vuejs one-page application under iOS system in webview part of APP's title document.title = xxx can not modify the plug only way to solve the problem born (compatible Andrews )
2, vue single page, a link to share via a browser application QQ, micro letters, only a title and a default icon pictures Home

Tested: APP micro-channel QQ Taobao Alipay

installation

npm install vue-wechat-title --save

Author: shows ten
link: https: //www.jianshu.com/p/b980725b62e8
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.

 

 

vue-WeChat-title

2.0.5 • Public • Published a year ago

 

effect

Vuejs single page application APP portion at iOS system webview title document.title = xxx can not be modified in a way that only the plug-born to solve this problem (Andrews compatible)

Tested APP

• Micro letter
• QQ
• Alipay
• Taobao

 

Effect (use the above list any experience opened a scan code APP)

Similar effect is the same but different methods demo version is written Vuejs1.x

Direct Open: http://vue-wechat-title.deboy.cn/

 

installation

Vuejs 1.x

npm install [email protected] --save

Vuejs 2.x

npm install vue-wechat-title --save

 

usage

Vuejs 1.x demo

Vuejs 2.x demo

 

ES6

main.js

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

Routing is defined (only part of the interception)

// ...

const routes = [

  {

    name: 'Home',

    path: '/home',

    meta: {

      title :  'Home '

    },

    component: require('../views/Home.vue')

  },

  {

    name: 'Order',

    path: '/order',

    meta: {

      title :  'Orders '

    },

    component: require('../views/Order.vue')

  },

  {

    name: 'UCenter',

    path: '/ucenter',

    meta: {

      title :  'Users '

    },

    component: require('../views/UCenter.vue')

  }

]

// ...

App.vue is recommended to use the global title only once this instruction available vuex or router do not define multiple use !!

<! - any element added v-wechat-title suggested that the title on the instruction corresponding to the defined route object meta  ->

<div v-wechat-title="$route.meta.title"></div>

<!--or-->

<router-view v-wechat-title="$route.meta.title"></router-view>

Pictures from the address defined default ./favicon.ico loaded can be relative or absolute

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

 

Welcome submit PR

Keywords

• Vuejs
• Micro-channel navigation bar title

install

 

npm i vue-wechat-title

 

weekly downloads

 

772

version

2.0.5

license

WITH

open issues

2

pull requests

0

homepage

github.com

repository

 

github

last publish

a year ago

collaborators

• 

 

Test with RunKit

Report a vulnerability

 

Help