vue动态改title

Step1. 安装：

$ npm install vue-meta --save

Step2. 在 router.js 中引入 vue-meta

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'

Vue.use(Router)
Vue.use(Meta)

export default new Router({
  //...
})

Step3. 开始定义 metaInfo

在任何一个component中都可以定义 metaInfo 属性

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

Home.vue

<template>
  <div id="page">
    <h1>这是首页</h1>
  </div>
</template>

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

About.vue

<template>
  <div id="page">
    <h1>关于我们</h1>
  </div>
</template>

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

如果想定义其他meta信息，可以使用vue-meta的API。
例如 meta :

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

output :

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

异步请求数据定义

如果component中使用了异步请求数据，可以使用 metaInfo() 方法。

Post.vue:

<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>

这样就很轻松地完成了页面meta info的设定。

源作者：http://www.zhuyuwei.cn/2018/vue-meta-for-vuejs.html