VueJS 和动态标题

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：无法设置未定义的属性“标题”

所以 this.metaInfo 是未定义的...

我的头衔需要基于 XHR 请求的响应。

Answer 1

这是我的解决方案：

我的 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;
            },
        };
    },

};

这为所有页面设置了我的默认页面标题，然后，Stephen Thomas 的答案包含关键逻辑。

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

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

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

• 第一阶段：浏览器显示默认页面标题

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

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

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

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

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

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

      this.example = obj;
  },

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

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

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