我使用了 nuxtjs 应用程序。 我设置的元标记动态正确并且在页面视图中没有显示源代码! 通过刷新元标记未在视图页面源中设置但在客户端正确!
在代码中:
async asyncData({ params, app, route }) {
try {
let post = await app.$axios.get("/api/post/post?slug=" + params.slug);
return {
post: post.data.result,
categoryName: post.data.result.category.categoryName,
};
} catch (e) {
console.log(e);
}
},
async mounted() {
await this.readDataFromAPI(this.$route.params.slug);
},
head() {
console.log("meta title tag is :");
console.log(this.metaTitle);
// console.log(process);
if (process.server) {
console.log('***********************************************************');
}
const metaTitle = this.metaTitle;
const metaDescription = this.metaDescription;
return {
title: metaTitle,
meta: [
{
hid: "title",
name: "title",
content: metaTitle,
},
{
hid: "apple-mobile-web-app-title",
name: "apple-mobile-web-app-title",
content: metaTitle,
},
{
hid: "og:title",
name: "og:title",
content: metaTitle,
},
{
hid: "description",
name: "description",
content: metaDescription,
},
{
hid: "og:description",
name: "og:description",
content: metaDescription,
},
],
};
},
computed: {
metaTitle() {
console.log(" computed metaTitle : " + this.post.title);
return this.post.title;
},
metaDescription() {
return this.post.metaDescription;
},
},
在 console.log 中:
元标题标签是:
0c53cbd.js:1 计算的元标题:未定义
0c53cbd.js:1 未定义
0c53cbd.js:1 元标题标签是:
0c53cbd.js:1 计算的元标题:lorem ipsum
0c53cbd.js:1 lorem ipsum