尝试使用字符串 + 变量设置 Vue Meta 页面标题

Posted 2023-02-22

【中文标题】尝试使用字符串 + 变量设置 Vue Meta 页面标题

【英文标题】：Trying to set Vue Meta page title using string + variable

【发布时间】：2019-08-18 01:34:51

【问题描述】：

我在使用 Nuxt JS 2.4.5 的项目中使用 Vue Meta 作为博客应用程序的一部分

我在尝试设置标题 + 来自 data () 的变量时遇到了一些问题，我不确定我错过了什么

我已经尝试过多次尝试让它工作，移动代码，使用this手动设置它，似乎没有任何工作......

<script>
import BlogsFromJson from '~/static/articles/blogs.json';

export default 
  head: 
    title: 'My Website: Blog: ' + this.myBlogTitle, // or something else
    meta: [
       hid: 'description', name: 'description', content: 'Read the latest news and articles from Flex Repay UK.' 
    ]
  ,
  data () 
    return 
      title: this.$route.params.title,
      blog: BlogsFromJson,
      myBlogTitle: 'some title'
    
  

</script>

我尝试在data () 中设置一个变量并静态使用它。

这样做应该给我My Website: Blog: some title

我会在这里遗漏什么？

【参考方案1】：

尝试使用函数而不是对象作为头部。 改变

head: 
  ...
,

到

head () 
  return 
    ...
  

【参考方案2】：

不要将 metaInfo 定义为对象，而是将其定义为函数并照常访问它：

Post.vue：

<template>
  <div>
    <h1> title </h1>
  </div>
</template>

你的脚本

<script>
  export default 
    name: 'post',
    props: ['title'],
    data () 
      return 
        description: 'A blog post about some stuff'
      
    ,
    metaInfo () 
      return 
        title: this.title,
        meta: [
           vmid: 'description', name: 'description', content: this.description 
        ]
      
    
  
</script>

PostContainer.vue：

<template>
  <div>
    <post :title="title"></post>
  </div>
</template>

<script>
  import Post from './Post.vue'

  export default 
    name: 'post-container',
    components:  Post ,
    data () 
      return 
        title: 'Example blog post'
      
    
  
</script>

【讨论】：

我正在尝试做：title: 'Flex Repay UK: Blog' + this.blogTitle - 这是我在data () 中工作所需要的项目

【参考方案3】：

metaInfo() 
        return 
            title: this.pageTitle,
        
    

【讨论】：

请提供的不仅仅是代码作为答案。相反，对代码进行解释并详细说明它回答问题的原因是最有益的。