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

install

npm i vue-wechat-title

weekly downloads

772

version

2.0.5

license

MIT

open issues

pull requests

homepage

github.com

repository

github

last publish

a year ago

collaborators

Test with RunKit

Report a vulnerability

Help

posted on 2019-11-12 21:43 qqhfeng16 阅读(849) 评论(0) 编辑收藏举报