如何在 route/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

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

How to update vue-meta on route/url change?

javascript

vue.js

vuejs2

vue-router

vue-meta