Question

刷新页面时出现以下错误：

ReferenceError: navigator is not defined
    at VueComponent.isMobile (src/views/user/Profile.vue:71:0)
    at fn (src/views/user/PublicProfile.vue?504b:30:0)
    at normalized (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue/dist/vue.runtime.common.dev.js:2584:37)
    at Proxy.renderSlot (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue/dist/vue.runtime.common.dev.js:2680:13)
    at Proxy.render (src/components/layouts/TwoColumn.vue?3126:22:0)
    at VueComponent.Vue._render (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue/dist/vue.runtime.common.dev.js:3538:22)
    at resolve (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8415:27)
    at waitForServerPrefetch (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8287:3)
    at renderComponentInner (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8426:3)
    at renderComponent (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8383:5)
    at RenderContext.renderNode (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8294:5)
    at RenderContext.next (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:2598:23)
    at cachedWrite (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:2451:9)
    at renderElement (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8544:5)
    at renderNode (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8296:5)
    at resolve (/Users/mark/Desktop/Sirius/SRS-556/sirius/node_modules/vue-server-renderer/build.dev.js:8421:5)
    at runMicrotasks ()
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

例如，假设我在 127.0.0.1 中，然后导航到 127.0.0.1/test/。我没有发生错误，但如果我已经在 /test/ 处然后刷新页面，则会发生上述错误。

有问题的代码如下：

<template #default>
    <u-modal v-model="reportUser" :min-width="isMobile() == true ? '150px' : '700px'" :max-width="isMobile() == true ? '300px' : '1000px'">
        <report-user-form :reportUser="reportUser" :user="user" @close="reportUser=false"/>
    </u-modal>
</template>


isMobile() {
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return true
  } else {
    return false
  }
},

如您所见，我只是使用 navigator.useragent 来决定模态大小。我怀疑 navigator 尚不存在，但我正在刷新的页面使用 navigator，但是当我访问不同的页面时，navigator 被填充，因此我没有收到错误当我之后访问使用 navigator 的页面时？无论如何，我该如何解决这个问题？

Answer 1

由于您拥有服务器端呈现的页面，您可以将特定于浏览器的 API 移动到 client-side lifecycle hook 中，例如 mounted，其中 window.navigator 可用。

声明一个数据属性（名为 "mobile"）：

export default {
  data() {
    return {
      mobile: false,
    }
  }
}

在组件的 mounted 钩子中，将 mobile 设置为 isMobile() 的结果：

export default {
  mounted() {
    this.mobile = this.isMobile()
  }
}

更新模板以使用 mobile 标志而不是 isMobile() 方法调用：

<u-modal v-model="reportUser"
    :min-width="mobile ? '150px' : '700px'"
    :max-width="mobile ? '300px' : '1000px'">

Vue js ReferenceError：导航器未定义

1 个答案: