vue动态改title

$ npm install vue-meta --save

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'
Vue.use(Router)
Vue.use(Meta)
export default new Router({
  //...
})

<template>
  <div >
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'App',
    metaInfo: {
      // 如果子component中没有定义 metaInfo.title ，会默认使用这个title
      title: '首页',
      titleTemplate: '%s | 我的Vuejs网站'
    }
  }
</script>

<template>
  <div >
    <h1>这是首页</h1>
  </div>
</template>
<script>
  export default {
    name: 'Home',
    metaInfo: {
      title: '这是一个首页',
      // 这里定义titleTemplate会覆盖App.vue中的定义
      titleTemplate: null
    }
  }
</script>

<template>
  <div >
    <h1>关于我们</h1>
  </div>
</template>
<script>
  export default {
    name: 'About',
    metaInfo: {
      // 这里的 title 会替换 titleTemplate 中的字符占位
      title: '关于我们'
    }
  }
</script>

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<template>
  <div>
    <h1>{{{ title }}}</h1>
  </div>
</template>
<script>
  export default {
    name: 'post',
    data () {
      return {
        title: ''
        description: '这是一篇文章...'
      }
    },
    metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    },
    created () {
      this.initData()
    },
    methods: {
      initData () {
        axios.get('some/url').then((resp) => {
          // 设置title时 metaInfo 会同时更新
          this.title = resp.title
          this.description = resp.decription
        })
      }
    }
  }
</script>