未在 nuxt js

时间:2021-01-02 09:57:53

标签: javascript vue.js nuxt.js server-side-rendering head

我使用了 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

0 个答案:

没有答案