1

我在我的博客的 Vue 应用程序中有一个非常基本的设置，我有/blog，这是我的博客帖子的列表，然后/blog/:slug，slug 是单个帖子的 slog（例如mysite.com/blog/my-awesome-blog-post。我vue-meta用于元标记, 一切都很好 - 除了个别博客文章的标签之外的一切。我的设置是：

应用程序.vue

export default {
  metaInfo: {
    title: 'Building great web experiences',
    titleTemplate: 'My Website | %s',
  },
  meta: [
    { charset: 'utf-8' },
    { name: 'description', content: 'The website for my organization' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ]
}

博客.vue

export default {
  metaInfo: {
    title: 'Blog Home'
  },

BlogPost.vue（遵循vue-meta 文档）

export default {
data() {
  metaDescription: '',
},
  metaInfo() {
    return {
      title: this.post.data.title,
      meta: [
        { vmid: 'description', name: 'description', content: this.metaDescription}
      ]
    }
  },

...
methods: {
    getPost() {
      const vm = this;
      butter.post
        .retrieve(this.$route.params.slug)
        .then(res => {
          vm.post = res.data;
          vm.metaDescription = vm.post.data.summary;
        })
        .catch(res => {
          console.log(res);
        });
    }
  },

问题是当我转到博客文章页面时，标题元标记仍然是My Site | Blog Home，而不是My Site | My Awesome Blog Post. 如果我在 for 中放入一个静态字符串title，它可以正常工作。而且，如果我metaInfo()在 Vue devtools 中检查函数返回的对象，它会显示title适当的值。我做错了什么，还是这是一个错误？根据文档，这很“容易”，但似乎并非如此。

4

1 回答 1

0

正如我在提交的 GitHub 问题中的评论中所指出的，我做了一个小改动（实际上，有一些改动是可行的）。第一个是创建一个名为 的数据变量metaTitle，将其填入getPost()并使用metaInfo()：

data() {
    return {
      post: {},
      metaTitle: '',
      metaDescription: ''
    };
  },
  metaInfo() {
    return {
      title: this.metaTitle,
      meta: [
        { vmid: 'description', name: 'description', content: this.metaDescription}
      ]
    }
  },
 methods: {
    getPost() {
      const vm = this;
      butter.post
        .retrieve(this.$route.params.slug)
        .then(res => {
          vm.post = res.data.data;
          vm.metaTitle = vm.post.data.title;
          vm.metaDescription = vm.post.summary;
        })
        .catch(res => {
          console.log(res);
        });
    }
  },

然后我还尝试了另一种方法，使我的帖子对象更小一级：

.then(res => {
  vm.post = res.data.data;
  vm.metaTitle = vm.post.data.title;
  vm.metaDescription = vm.post.summary;
})

并在 metaInfo() 中使用它：

metaInfo() {
  return {
    title: this.post.title,
    meta: [
      { vmid: 'description', name: 'description', content: this.metaDescription}
    ]
  }
},

也许问题是title数据不能在一个对象中下降太多级别？不确定，但无论哪种方式都有效。

于 2020-03-23T04:44:37.920 回答