javascript - nuxt layout - 为移动端和桌面端提供不同的布局

Question

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

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

我正在创建一个 nuxt 应用程序。我正在尝试检测 View 何时是移动 View 或桌面 View 。如果我更改我的 ide 中的代码并保存，则 isMobile 为真，并且它将设置为移动布局。但是，一旦您刷新页面，isMobile 为 false，它将设置为桌面移动版。

我假设在它有时间确定 isMobile 是真还是假之前设置布局，并自动设置得太假。

我不知道如何让这样的东西发挥作用。无论我尝试什么，它总是失败。

Answer 1

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

它有什么特别之处？这个。 👇

This module injects flags that indicate a device type into the context and the component instance.

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

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