vuejs3, cannot add dynamic title and description with usehead meta package-CodePudding

I have been trying to use Vuejs3 useHead package and add dynamic title and decription meta, but i get $route is undefined.... i need help...

<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`
        },
      ],
    })
  },

CodePudding user response：

You need to use useRoute() in order to access the router, since in the setup hook this does not refer to the component instance.

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