vue單頁面應用中動態修改title

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

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

詳細信息查看：vue-weachat-title
解決問題：
1、Vuejs 單頁應用在iOS系統下部分APP的webview中 標題不能通過 document.title = xxx 的方式修改 該插件只為解決該問題而生(兼容安卓)
2、在vue單頁面中，通過瀏覽器分享到QQ、微信等應用中的鏈接，只有一個首頁標題和默認icon圖片

已測試：APP 微信 QQ 支付寶 淘寶

安裝

npm install vue-wechat-title --save

作者：示十
鏈接：https://www.jianshu.com/p/b980725b62e8
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

 

vue-wechat-title

2.0.5 • Public • Published a year ago

 

作用

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

已測試APP

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

 

效果 (請使用以上列表中任意一個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

 

用法

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>

自定義加載的圖片地址 默認是 ./favicon.ico 可以是相對或者絕對的

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

 

歡迎提交PR

Keywords

• Vuejs
• 微信導航欄標題

install

 

npm i vue-wechat-title

 

weekly downloads

 

772

version

2.0.5

license

MIT

open issues

2

pull requests

0

homepage

github.com

repository

 

github

last publish

a year ago

collaborators

• 

 

Test with RunKit

Report a vulnerability

 

Help