如何在路由/网址更改时更新 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