页面刷新后的 Nuxt.js 元数据是从 config 而不是 head 方法填充的

问题描述

我在 nuxt.js 应用程序中遇到元数据问题。我想在一个详细信息页面中填充动态元标记

--页面
----事件
-----_id.vue

当我通过链接浏览网站时，一切都很好。但是如果我只是刷新页面，元标记使用来自 nuxt.config.js 的值。例如，我得到了“SiteTitle nuxt.config.js”而不是“SiteTitle - Some event title”。

Nuxt 2.15.3 版

nuxt.config.js

export default {
  head: {
    titleTemplate: '%s - SiteTitle',title: 'SiteTitle nuxt.config.js',htmlAttrs: {
      lang: 'en'
    },Meta: [
      {charset: 'utf-8'},{name: 'viewport',content: 'width=device-width,initial-scale=1'},{hid: 'description',name: 'description',content: ''}
    ],link: [
      {rel: 'icon',type: 'image/x-icon',href: '/favicon.ico'}
    ]
  }
  components: true,buildModules: [
    '@nuxt/typescript-build','@nuxtjs/vuetify',],modules: [`enter code here`
    '@nuxtjs/axios'
  ],vuetify: {
    customVariables: ['~/assets/variables.scss'],},axios: {
    baseURL: 'https://api.someurl.com',}
}

和_id.vue文件

<template>
  <v-card class="mt-6 mb-5" outlined>
    <v-card-title>{{ model.title }}</v-card-title>
  </v-card>
</template>

<script lang="ts">
import {Component,Vue} from "nuxt-property-decorator"
import {EventModel} from "~/api/models/EventModel";
import EventApi from "~/api/EventApi";

@Component({
  async asyncData({params,$axios}) {
    const  eventApi = new EventApi($axios)
    const model = await eventApi.get(parseInt(params.id))
    return { model: model };
  },head(this: EventPage): object {
    return {
      title: "SiteTitle - " + this.model.title,Meta: [
        {
          hid: 'description',content:  this.model.shortDescription
        }
      ]
    }
  },})
export default class EventPage extends Vue {

  model = {} as EventModel

  async fetch() {

  }
}
</script>

我尝试在fetch中调用api，在这种情况下，刷新页面时元值始终具有有效值，但在这种情况下，Facebook共享调试器从nuxt.config.js获取元数据，此解决方案不合适

感谢您的帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）