nuxt布局-具有针对移动设备和台式机的独特布局

Question

import { isMobile } from 'mobile-device-detect'

export default {
    layout(context) {
        const mobile = isMobile ? 'mobile-layout' : 'desktop-layout
        return mobile
    }
}

我正在创建一个nuxt应用程序。我试图检测视图是移动视图还是桌面视图。如果我在自己的ide中更改了代码并保存，则isMobile为true，它将设置为mobile-layout。但是，一旦刷新页面，isMobile为false，它将设置为桌面移动。

我假设在有时间确定isMobile是true还是false之前就已经设置了布局，并且会自动将其设置为false。

我不知道该如何做这样的工作。无论我尝试什么，它总是失败。

Answer 1

当我们只有 Nuxt 社区为此目的提供官方支持时，为什么要选择一些通用软件包？我建议您使用 @nuxtjs/device 模块。

它有什么特别之处？这。 ?

<块引用>

此模块将指示设备类型的标志注入上下文 和组件实例。

这就是您可以动态更改布局的方法。它在包的文档中提到。 https://github.com/nuxt-community/device-module#nuxtjsdevice

export default {
    layout: (ctx) => ctx.isMobile ? 'mobile' : 'default'
}