Nuxt.js：在每个页面上为移动/桌面使用替代布局答案

【问题标题】：Nuxt.js: use alternative layout for mobile/desktop on every pageNuxt.js：在每个页面上为移动/桌面使用替代布局
【发布时间】：2021-03-20 06:03:04
【问题描述】：

Nuxt 添加了一个布局属性，您可以为每个页面设置该属性。如果缺少，Nuxt 使用默认布局。您可以有一个单独的移动布局，并通过将其包含在 vue 组件的脚本部分中来指定特定页面使用移动布局：

export default {
  layout: 'blog',
  // OR
  layout(context) {
    return 'blog'
  }
}

最终我们的应用程序可能有数百个页面/路由，而不是为每个页面/路由添加一个布局方法来检查它是否是移动用户代理。有没有办法将其添加到项目中的所有页面组件中（无需同时添加到所有 Vue 组件中）？

【问题讨论】：

【解决方案1】：

您可以尝试采用这种方法：

layouts/blog.vue:

<template>
  <div>
      <blog-mobile v-if="isMobile" />
      <blog-desktop />
  </div>
</template>

因为<Nuxt /> 只能在布局中访问，您可以尝试将其作为插槽传递，例如：

<blog-mobile v-if="isMobile">
  <Nuxt />
</blog-mobile>

BlogMobile.vue:

<template>
  <div>
    <p>this is blog mobile layout</p>
    <slot></slot> <!-- Your <Nuxt /> come here -->
  </div>
</template>

【讨论】：