如何在路由/网址更改时更新 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() {&nbsp; &nbsp; const title = this.Product.ProductTitle;&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; title: title,&nbsp; &nbsp; &nbsp; &nbsp; meta: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'description', content: title&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }}https://vue-meta.nuxtjs.org/guide/caveats.html#reactive-variables-in-template-functions