javascript - 如何在 vue/nuxt 中结合 ssr 根据屏幕尺寸有条件地正确渲染 html

Question

假设我有标记通过 v-if 只为桌面呈现。

如果它是移动的，它应该渲染一些东西。

我正在使用 vue-mq 包，它允许设置应该用于服务器端渲染的默认断点。

当我将“sm”放在那里并从桌面加载页面时，浏览器显然首先接收到网站的“sm”版本，这可能与“lg”版本不同。

因此导致控制台中出现不匹配。

在 nuxt/vuejs 中有条件地为 ssr 渲染 html 内容的正确方法是什么？

关于如何在不让用户加载两个版本的标记的情况下正确解决此问题的任何想法(例如使用 v-show 而不是 v-if 解决了不匹配但确实增加了带宽使用)？

非常感谢任何帮助。

谢谢!

Answer 1

你想要@nuxtjs/device .当一个 http 请求到达您的 Nuxt 应用程序时，此模块会检查用户代理 header 并确定用户代理(即发出请求的设备)是否是移动设备、平板电脑、台式机等。这发生在服务器端，之前您的客户端代码会执行，因此模板中的 v-if 将得到正确处理。

例如:

v-if="$device.isMobile"