Nuxt 3 在移动设备上更改布局

Question

所以我刚刚启动了 Nuxt 3 应用程序（关闭了 ssr），并且尝试在移动设备上更改布局。我正在关注本教程：https://www.youtube.com/watch?v=xh_OrVwgh4M。

问题是我使用的是 nuxt 3，所以有点不同。我不知道我做错了什么。

在教程中，我在配置中定义了他的中间件，但我是这样做的；我在我的

middleware

文件夹中创建了

mobile.global.ts

，代码如下：

export default function(context: { isMobile: boolean; }){
    let userAgent = navigator.userAgent;
    context.isMobile = /mobile/i.test(userAgent)
}

这就是我的

index.vue

：

<script setup lang="ts">

definePageMeta({
    layout: ({isMobile}) =>  isMobile ? "mobile" : "default",
})

</script>

这是我收到的警告：

valid layout `({ isMobile }) => isMobile ? "mobile" : "default"` selected.

Answer 1

如果您有能力，我建议使用设备模块，它可以自动执行您想要执行的中间件操作。

关于你的问题。这不是你在 nuxt 3 中定义 middleware 的方式。 您可以使用

defineNuxtRouteMiddleware((to, from) => {...})

来实现此目的。

我首先会定义一个这样的中间件。

export default defineNuxtRouteMiddleware((to, from) => {
let userAgent = process.server
    ? useRequestHeaders()["user-agent"]
    : navigator.userAgent
to.params.isMobile = String(/mobile/i.test(userAgent))
})

然后像这样访问页面文件中的 isMobile 参数。

<script setup lang="ts">
const layout = useRoute().params.isMobile == "true" ? "mobile" : "desktop"
</script>

<template>
  <NuxtLayout :name="layout">
    whatever
  </NuxtLayout>
</template>

现在，我不推荐第二种选择。 + 我会使用反应值而不是无类型 isMobile 参数。 + 我不会把这个逻辑放在每个页面中，而是放在 布局本身

Answer 2

我通过 https://developer.mozilla.org/en-US/docs/Web/API/window/innerWidth 做了一个简单的 Javascript 条件来查看它是否是类似移动设备的视口宽度。

onMounted(() => {
  const isMobileViewport = window.innerWidth >= 1024 ? true : false
...
}

如果您正在执行 SSR，请仅在

onMounted

内执行此操作或检查

window

属性。如果调整视口，此示例不会动态更新 true/false，但我通常不喜欢观察视口、滚动、鼠标更改。