Vue js ReferenceError:未定义导航器

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移动到客户端生命周期挂钩中，比如mounted，其中window.navigator是可用的。

1. 声明一个数据支柱(名为"mobile")： 导出默认{ data() {返回{ mobile: false，}}
2. 在组件的mounted钩子中，将mobile设置为isMobile()的结果： 导出默认{ this.mobile = this.isMobile() }}
3. 更新模板以使用mobile标志而不是isMobile()方法调用：