如何在Nuxtjs V3中获取window.location.href

Question

我正在尝试让玩家通过二维码加入游戏。由于该游戏将托管在多个 IP 上，因此我想动态生成 URL。

这是我当前在 NuxtJS Vue 组件中的解决方法：

<template>
  <input placeholder="copy browser window url into this field" v-model="fullPath" @change="generateQR">
</template>

<script setup>
  const fullPath = ref(null)
  QRCode.toDataURL(fullPath.value + ...
</script>

我想做的是：

<script setup>
  // not working phantasy code
  QRCode.toDataURL(window.location.href + ...
</script>

当使用useRouter()和useRoute()的

.fullPath

属性时，我仍然只得到相对路径

/

而不是

http://10.16.1.173:3000/

。

---

GitLab 上的完整代码：pages/index.vue

Answer 1

在访问“窗口”对象之前尝试检查您是否位于客户端，您可以使用：

if (process.client) {
      console.log(window.location.href)
}

Answer 2

尝试使用这个：

this.$route.query

Answer 3

在 Nuxt 3 中，您可以使用可组合的 useRequestURL() 来获取服务器和客户端上的当前 URL（如果使用混合渲染，可能不起作用）：

const url = useRequestURL();
console.log(url.href);