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

对于反应式，请在返回语句之外使用变量。

metaInfo() {
const title = this.Product.ProductTitle;
return {
title: title,
meta: [
{
name: 'description', content: title
}
]
}
}

https://vue-meta.nuxtjs.org/guide/caveats.html#reactive-模板函数中的变量