vue动态title

详细信息查看：vue-weachat-title

解决问题：

1、Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

2、在vue单页面中，通过浏览器分享到QQ、微信等应用中的链接，只有一个首页标题和默认icon图片

已测试：APP 微信 QQ 支付宝 淘宝

安装

npm install vue-wechat-title --save

用法

1、在main.js中引入

importVueWechatTitlefrom'vue-wechat-title'Vue.use(VueWechatTitle)

2、在路由文件 index.js 中给需要的路由添加 title

routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home.vue'),
      meta: {
        title: '首页',
        keepAlive: true
      }
    },
    {
      path: '/book',
      name: 'book',
      component: () => import('../views/book'),
      meta: {
        title: '书',
        keepAlive: false
      }
    }
  ]

3、在 app.vue 中修改 router-view 组件

在各个组件中随便一个标签中都可写入

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

或者

<router-viewv-wechat-title='$route.meta.title'></router-view>

若想要动态改变title值：

<divv-wechat-title="$route.meta.title={data.title}"></div>

自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的

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

book.vue样例代码如下

文档中的button使用了van组件。换成普通的button 一样。

<template>
  <div>
    <div v-wechat-title="$route.meta.title=title"></div>
    书
    <van-button type="default" click="title">默认按钮</van-button>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        title : '书11'
      }
    },
    mounted() {

    },
    methods:{
      title(){
        this.title = 'sdfsdf'
      }
    }
  }
</script>

<style scoped>

</style>