Question

尝试使用vue-meta

我不明白如何根据XHR响应设置标题。到目前为止，我有：

<script>
    export default {
        name: 'Model',
        data() {
            return {
                model: [],
            }
        },
        metaInfo: {
            title: 'Default Title',
            titleTemplate: '%s - site slogan'
        },
        methods: {
            getModels() {
                window.axios.get(`/api/${this.$route.params.manufacturer}/${this.$route.params.model}`).then((response) => {
                    this.model = response.data;
                    this.metaInfo.title = response.data.model_name; // THIS NOT WORKING
                });
            }
        },
        watch: {
            $route(to, from) {
                if ( to.name === 'model' ) {
                    this.getModels();
                }
            },
        },
        created() {
            this.getModels();
        }
    }
</script>

当我尝试设置

this.metaInfo.title = response.data.model_name;

获取错误：未捕获（承诺）TypeError：无法设置未定义的属性“ title”

因此this.metaInfo是未定义的...

我需要根据XHR请求的回复来命名。

Answer 1

我假设您在vue实例的方法内调用this.metaInfo.title = response.data.model_name;。我看到的问题是，您应该将metaInfo对象放在data（）的返回对象中。像这样：

data() {
  return {
    model: [],
      metaInfo: {
        title: 'Default Title',
        titleTemplate: '%s - site slogan'
     },
  };
},

Answer 2

您需要使用metaInfo的函数形式，并使其从反应性数据中获取更新

<script>
export default {
    data() {
        return {
            title: "Default Title",
            // ...
        };
    },
    metaInfo() {
        return {
            title: this.title,
            // ...
        };
    },
    methods: {
        getModels() {
            window.axios.get("url...").then((response) => {
                this.title = response.data.model_name;
            });
        }
    },
    //  ...

Answer 3

这是我的解决方案：

我的SPA应用程序中有一个根组件：App.vue，其中包含以下代码：

export default {
    /**
     * Sets page meta info, such as default and page-specific page titles.
     */
    metaInfo() {
        return {
            titleTemplate(titleChunk) {
                const suffix = "Marvin Rodank's dank site";
                return titleChunk ? `${titleChunk} - ${suffix}` : suffix;
            },
        };
    },

};

这将为所有页面设置我的默认页面标题，然后，斯蒂芬·托马斯的答案包含关键逻辑。

对于具有静态页面标题的所有页面，这很容易：

metaInfo() {
    return { title: 'List examples' };
},

但是动态页面标题要困难得多，但是一旦您意识到页面加载分两个阶段，仍然很容易：

阶段1：浏览器显示默认页面标题

阶段2：使用动态标题更新页面标题

metaInfo() {
    return {
        title: this.example.name,
    };
},

在此处的动态标题示例中，我的子组件从API端点获取对象this.example，因此请注意，this.$metaInfo().title在填充this.example时会自动更新。 / p>

您可以使用以下代码对其进行测试：

  metaInfo() {
      return {
          title: this.example.name,
      };
  },

  mounted() {
      const obj = {
          name: 'Sally',
          age: 1337,
      };

      this.example = obj;
  },

VueJS和动态标题

3 个答案: