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

Question

路线更改时，我网站上的元数据不会更新。路线本身有一个watch可以很好地更新视图，但从metaInfo()没有vue-meta跟上。我的<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/123to/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