分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了页面刷新后的 Nuxt.js 元数据是从 config 而不是 head 方法填充的，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到页面刷新后的 Nuxt.js 元数据是从 config 而不是 head 方法填充的的问题如何解决？下面主要结合日常开发的经验，给出你关于页面刷新后的 Nuxt.js 元数据是从 config 而不是 head 方法填充的的解决方法建议，希望对你解决页面刷新后的 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>