如何在Vue js中使用vue-meta从动态数据更新元信息？

npm install vue-meta

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta)

export default {
  metaInfo() {
    return {
      title: this.dynamicTitle,
      meta: [
        { name: 'description', content: this.dynamicDescription }
      ]
    }
  },
  data() {
    return {
      dynamicTitle: '动态标题',
      dynamicDescription: '动态描述'
    }
  }
}

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

Vue.use(Router)

const router = new Router({
  routes: [
    // 路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 在路由切换前更新元信息
  if (to.meta.metaInfo) {
    const metaInfo = typeof to.meta.metaInfo === 'function' ? to.meta.metaInfo() : to.meta.metaInfo
    Vue.nextTick(() => {
      document.title = metaInfo.title || document.title
      const metaTags = document.getElementsByTagName('meta')
      for (let i = 0; i < metaTags.length; i++) {
        const tag = metaTags[i]
        if (tag.getAttribute('property') === 'og:title' || tag.getAttribute('name') === 'twitter:title') {
          tag.setAttribute('content', metaInfo.title || '')
        }
        if (tag.getAttribute('property') === 'og:description' || tag.getAttribute('name') === 'twitter:description') {
          tag.setAttribute('content', metaInfo.description || '')
        }
      }
    })
  }
  next()
})

export default router