Vue3使用useHead添加动态标题及meta描述时$route未定义如何解决

错误原因 #

Vue3的组合式API setup() 执行阶段组件实例尚未初始化，不存在this指向，因此无法通过this.$route的方式读取路由参数。

解决步骤 #

• 从vue-router中导入useRoute钩子，调用后获取当前路由实例
• 如果路由参数存在动态更新的可能，建议用计算属性包裹useHead的配置，保证页面head数据同步更新

正确代码示例 #

<script setup>
import { useRoute } from 'vue-router'
import { useHead } from '@vueuse/head'
import { computed } from 'vue'

const route = useRoute()

// 路由参数固定不会变化的场景可直接使用
useHead({
  title: route.params.title,
  meta: [
    {
      name: 'description',
      content: route.params.description
    },
  ],
})

// 路由参数可能动态更新的场景，使用计算属性包裹配置
/*
useHead(computed(() => ({
  title: route.params.title,
  meta: [
    {
      name: 'description',
      content: route.params.description
    }
  ]
})))
*/
</script>

内容的提问来源于stack exchange，提问作者Josip Marić