useHead仅在页面挂载时更新标题，activated钩子触发时不更新的问题求助

你的问题出在useHead默认仅在组件首次挂载时执行一次配置逻辑，而使用keep-alive包裹的页面触发activated钩子时，不会重新触发useHead的初始化，导致标题无法更新。下面是两种可行的解决方法：

方法一：结合onActivated手动调用更新逻辑 #

把标题更新逻辑封装成函数，在首次挂载和activated钩子中都执行：

<script setup>
import { useHead } from '@vueuse/head' // Nuxt项目可直接使用内置的useHead
import { onActivated } from 'vue'

const setPageTitle = () => {
  useHead({ title: "Join Us" })
}

// 首次挂载时设置标题
setPageTitle()

// 页面重新激活时重新设置标题
onActivated(() => {
  setPageTitle()
})
</script>

方法二：使用响应式变量触发自动更新 #

将标题设为响应式变量，让useHead监听其变化，在activated钩子中更新变量值（即使值相同也会触发响应）：

<script setup>
import { useHead } from '@vueuse/head'
import { ref, onActivated } from 'vue'

const pageTitle = ref("Join Us")

// 传入函数让useHead监听响应式变量
useHead({
  title: () => pageTitle.value
})

onActivated(() => {
  // 更新变量触发标题更新
  pageTitle.value = "Join Us"
})
</script>

这两种方法都能确保页面每次被激活时，标题都会重新更新为目标值。

内容的提问来源于stack exchange，提问作者Muhammad Binyameen Malik