vue.js - 在我使用 nuxt-property-decorator 的 nuxtjs 中添加动态元标记时遇到问题
问题描述
我尝试使用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 { }
从上面的代码只添加标题标签
- 尝试使用 Nuxtjs文档代码:
<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
推荐阅读
- reporting-services - 当 SSRS 报告包含分页符并导出到 excel 时,如何不分隔工作表?
- node.js - 人口问题:猫鼬/快递
- r - R使用runifpoint函数生成带有条件的点
- marklogic - MarkLogic CoRB 信息性消息
- python - 在 PDF 或 JPG 中定位水平线的 X&Y
- angular - 获取以前的路由 URL:Angular
- python - 为什么 Scipy 和 EXCEL 中的 Bessel 函数会给出不同的结果?
- sql - 使用 NestJS 执行自定义查询的正确方法是什么?
- python - 合并 3 个多索引数据帧以创建一个多索引数据帧
- node.js - 2个passport.authenticate方法的区别