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 是真还是假之前就已经设置好了，并且自动设置得太假了。

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

Answer 1

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

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

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

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

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