如何解决页面刷新后的 Nuxt.js 元数据是从 config 而不是 head 方法填充的
我在 nuxt.js 应用程序中遇到元数据问题。我想在一个详细信息页面中填充动态元标记
--页面
----事件
-----_id.vue
当我通过链接浏览网站时,一切都很好。但是如果我只是刷新页面,元标记使用来自 nuxt.config.js 的值。例如,我得到了“SiteTitle nuxt.config.js”而不是“SiteTitle - Some event title”。
Nuxt 2.15.3 版
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 举报,一经查实,本站将立刻删除。