我尝试使用 nuxt-property-decorator 在 nuxtjs 中添加元标签,但只添加了标题标签,但没有添加其他元标签
我也使用了 vue-meta 包,但我也未能解决这个问题
这就是我的代码的样子:
<script lang="ts">
import { Component, Vue, Prop } from "nuxt-property-decorator";
@Component({
metaInfo:{
title: 'Default Title',
titleTemplate: '%s | vue-meta Example App',
meta: [
{ charset: 'utf-8' },
{ vmid: 'description', name: 'description', content: 'this is a description'}
]
},
components: {
}
})
export default class HomePage extends Vue {
}
上面的代码仅添加标题标签
<script lang="ts">
import { Component, Vue, Prop } from "nuxt-property-decorator";
@Component({
head: {
title: 'my website title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
components: {
}
})
export default class HomePage extends Vue {
}
</script>
它不添加任何东西
@Component({
head: {
title: 'my website title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
}
export default class PwHomePage extends Vue {
head() {
return {
title: "Default Title",
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
]
}
}
export default class PwHomePage extends Vue {
metaInfo() {
return {
title: 'Default Title',
titleTemplate: '%s | vue-meta Example App',
meta: [{
vmid: 'description',
name: 'description',
content: "this.description",
}]
}
}
}
嘿我解决了这个问题,试试这个代码。
@Component({
asyncData({ params, error }): Promise<any> {
...
},
metaInfo(this: MyPageClass): object {
return {
title: this.myAsyncData,
titleTemplate: '%s | vue-meta Example App',
meta: [
{name: 'description',content: 'This is Free Projects Page'},
{property:"og:title",content: "Epiloge - Build your network in your field of interest"},
{property:"og:type",content: "website"},
{name:"robots",content: "index, follow"},
],
};
}
})
class MyPageClass extends Vue {
myAsyncData?: string