vuejs3，无法使用 usehead 元包添加动态标题和描述答案

【问题标题】：vuejs3, cannot add dynamic title and description with usehead meta packagevuejs3，无法使用 usehead 元包添加动态标题和描述
【发布时间】：2021-12-30 14:08:29
【问题描述】：

我一直在尝试使用 Vuejs3 useHead 包并添加动态标题和描述元，但我得到 $route 未定义....我需要帮助...

<router-link :to="{name:'productDetails', params:{id:rope._id, title:rope.title, price: rope.price, description:rope.description, quantity:rope.totalQuantity}}">

peoductDetails.vue:

 setup(){

    useHead({
      title: this.$route.params.title,
      meta: [
        {
          name: `description`,
          content: `blalala`
        },
      ],
    })
  },

【问题讨论】：

标签： vue.js vuejs3 vue-meta

【解决方案1】：

您需要使用useRoute() 才能访问路由器，因为在设置挂钩this does not refer to the component instance。

setup(){
    const route = useRoute();
    useHead({
        title: route.params.title,
        meta: [
            {
                name: `description`,
                content: `blalala`
            },
        ],
    })
},

【讨论】：