如何在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>