Question

VueJS 和动态标题

2018-08-19

8573

vue.js vuejs2 vue-component vue-router

尝试使用 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

您需要使用 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 2

这是我的解决方案：

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

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

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

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

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

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

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

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

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

      this.example = obj;
  },

Answer 3

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

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