如何在路由/url更改时更新vue-meta？

Question

当路由改变时，我网站上的元数据不会更新。路由本身有一个watch，可以很好地更新视图，但来自vue-meta的metaInfo()没有跟上。我的代码的<script>部分如下所示：

<script>
    export default {
        name: "Product",
        watch: {
            '$route.params.ProductID': {
                deep: true,
                immediate: true,
                handler() {
                    this.getProduct(); // calls getProduct() on route change. Can I also call metaInfo() from here somehow?
                }
            }
        },
        metaInfo() {
            return {
            title: this.Product.ProductTitle,
            meta: [
                {
                    name: 'description', content: this.Product.ProductTitle
                }
            ]
        }
        },
        computed: {
            Product() {
                return this.$store.getters.getProduct
            }
        }, mounted() {
            if (this.Product == null || !this.Product.length) {
                this.getProduct();
            }
        }, methods: {
            getProduct() {
                return this.$store.dispatch('loadProduct', {ProductID: this.$route.params.ProductID})

            } 
        }
    }
</script>

发生的情况是，当我更改路由并从/product/123转到/product/124时，metaInfo()仍然显示/product/123的元数据。如果我点击刷新，那么metaInfo()将更新并显示/product/124的正确数据。

我需要watch来触发metaInfo()的更新，但不知道怎么做。我在任何地方的文档里都找不到这些信息。请帮帮忙？

Answer 1

对于反应式，在return语句之外使用变量。

metaInfo() {
    const title = this.Product.ProductTitle;

    return {
        title: title,
        meta: [
            {
                name: 'description', content: title
            }
        ]
    }
}

https://vue-meta.nuxtjs.org/guide/caveats.html#reactive-variables-in-template-functions