Nuxt.js:在每个页面上为移动/桌面使用另一种布局
Nuxt.js:在每个页面上为移动/桌面使用另一种布局
提问于 2020-12-09 05:14:36
Nuxt添加了一个可以为每个页面设置的布局属性。如果缺少，Nuxt将使用默认布局。您可以为移动端使用单独的布局，并通过在vue组件的脚本部分中包含以下内容来指定特定页面使用移动端布局：
export default {
layout: 'blog',
// OR
layout(context) {
return 'blog'
}
}来源：https://nuxtjs.org/docs/2.x/components-glossary/pages-layout/
最终，我们的应用程序可能有数百个页面/路由，而不是为每一个单独的页面/路由添加一个layout方法来检查它是否是一个移动用户代理。有没有办法将它添加到项目的所有页面组件中(而不是添加到所有Vue组件中)？
回答 1
Stack Overflow用户
发布于 2020-12-09 05:30:26
您可以尝试使用这种方法：
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65207015
复制相关文章
相似问题
腾讯云开发者
