如何在Nuxt3中添加响应式Canonical URL？解决导航不更新问题

问题描述 #

我想在Nuxt3应用的每个页面中添加Canonical URL。在Nuxt2中，实现方式如下：

// ~/layouts/default.vue 

export default {
  head() {
    return {
      link: [
        {
          rel: 'canonical',
          href: 'https://example.com' + this.$route.path
        }
      ]
    }
  }
}

在Nuxt3中，我尝试了以下代码，但页面导航时Canonical URL不会更新：

// ~/layouts/default.vue 

<script setup>
const route = useRoute()
useHead({
  link: [
    {
      rel: 'canonical',
      href: 'https://example.com' + route.path,
    },
  ],
})
</script>

请问如何让它具备响应式？

解决方案 #

方法一：将useHead参数改为函数 #

把useHead的配置对象换成返回配置的函数，这样每次路由变化时，Nuxt会重新执行函数并更新头部信息：

// ~/layouts/default.vue
<script setup>
const route = useRoute()

useHead(() => ({
  link: [
    {
      rel: 'canonical',
      href: `https://example.com${route.path}`
    }
  ]
}))
</script>

方法二：使用响应式计算属性 #

通过computed创建响应式的Canonical URL，再绑定到useHead的配置中：

// ~/layouts/default.vue
<script setup>
const route = useRoute()
const canonicalUrl = computed(() => `https://example.com${route.path}`)

useHead({
  link: [
    {
      rel: 'canonical',
      href: canonicalUrl
    }
  ]
})
</script>

优化方案：自动获取当前域名 #

避免硬编码域名，使用Nuxt3提供的useRequestURL()工具函数自动获取当前站点的基础URL，适配开发、生产等不同环境：

// ~/layouts/default.vue
<script setup>
const route = useRoute()
const requestUrl = useRequestURL()

useHead(() => ({
  link: [
    {
      rel: 'canonical',
      href: new URL(route.path, requestUrl).href
    }
  ]
}))
</script>

原因说明 #

你之前的写法中，useHead接收的是静态对象，href的值在组件初始化时就被固定，不会随着route.path的变化自动更新。而通过函数返回配置或绑定响应式计算属性，Nuxt3能够监听路由变化，实时重新计算并更新Canonical URL。

内容的提问来源于stack exchange，提问作者some-user