javascript - 如何在路由/网址更改时更新 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()但不知道该怎么做。我在任何地方的文档中都找不到此信息。请帮忙？

标签： javascriptvue.jsvuejs2vue-routervue-meta

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