如何在Nuxt3中添加规范URL？

Question

我想将规范 URL 添加到 Nuxt3 应用程序中的每个页面。

在 Nuxt2 中可以这样做：

// ~/layouts/default.vue 

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

在 Nuxt3 中我尝试使用：

// ~/layouts/default.vue 

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

但是，导航时不会更新。如何使其具有反应性？

Answer 1

参数必须转换为函数：

// ~/layouts/default.vue 

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