例如我们使用 Nuxt2 开发了一个用于内嵌在某个 App内的网页项目，封装一个 Layout，里面有一些公共模块，比如弹窗、toast 消息、loading 等方便我们全局调用。
App 内有一个分享功能可以将我们的某些页面分享出去，被分享出去的页面会包含一些只在App外使用的相关模块， 但同时只在 App内使用的网页将不会包含这些 App外的模块。
也许我们可以用一个 if 语句将 App外的模块单独区分，但这样做会使只在 App内打开的网页与不相关的代码交织在一起。所以我们最好将 App外的模块单独放到一个 Layout 中。然后通过引用的方式把另一个公共模块以嵌套的方式包含进来。
实现：
首先在公共模块 Layout 文件中增加一个 slot 插槽
// 公共模块布局文件: layouts/default.vue
<template>
<div>
<!-- 一些公共模块 -->
<Toast />
<Loading />
<Alert />
<!-- 增加一个 slot 插槽 -->
<slot />
<nuxt/>
</div>
</template>
然后在 App外使用的模块中引用公共模块布局文件
// App外使用的模块 layouts/app-outsite.vue
<template>
<DefaultLayout>
<!-- 一些App外使用的模块 -->
<DownloadApp />
<OpenInApp />
</DefaultLayout>
</template>
<script>
import DefaultLayout from '~/layouts/default.vue';
export default {
components: {
DefaultLayout,
},
};
</script>
最后，我们对只在 App内使用的网页使用 layout: "default" 布局，它不会包含任何 App外的模块。需要在 App外使用的页面使用 layout: "app-outsite" 布局，它同时包含公共模块与 App外使用的模块。
Nuxt3
注意，本案例仅适用于 Nuxt2 的版本，最新的 Nuxt3 对于 Layout 的使用有一些变更，但本文章的思路在 Nuxt3中依旧是有效的，大家可以自己尝试一下。