vue中使用vue-meta處理元信息

vue-meta有以下特點：

• 在組件內設置 metaInfo，便可輕松實現頭部標簽的管理
• metaInfo 的數據都是響應的，如果數據變化，頭部信息會自動更新
• 支持 SSR

如何使用：

安裝：$ npm install vue-meta --save，

在入口文件中引入代碼如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
 
 refreshOnceOnNavigation: true
})
Vue.config.productionTip = false
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

在這里引入后use.use該插件，
在組件中定義metaInfo對象代碼如下：

<template>
  <div class="hello">
    helloword
  </div>
</template>

<script>
export default {
  metaInfo: {
    title: 'My Example App',
    titleTemplate: '%s - Yay!',
    htmlAttrs: {
      lang: 'en',
      amp: true
    }
  },
  name: 'HelloWorld',
  props:['id'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },

可以看一下頁面顯示