Nuxt：如何在不重新加载的情况下在多个路由页面中显示顶级组件？答案

【问题标题】：Nuxt: how to display a top level component inside of multiple routed pages without reloading it?Nuxt：如何在不重新加载的情况下在多个路由页面中显示顶级组件？
【发布时间】：2021-07-18 23:27:42
【问题描述】：

我开始了一份新工作，我需要用 nuxt 建立一个网站。一个典型的网站在 nuxt 布局文件中应该是这样的：

<NavMenu />
<Nuxt /> - my different routed pages
<Footer />

每当我更改页面时，<Nuxt /> 会显示另一个页面，但 <NavMenu /> 保持原样。

但是我现在正在构建的网站需要一个特殊的设计。想象每个页面看起来像这样：（注意：这纯粹是设计/布局描述，不是实际的 vue 组件）

<HeroImage /> - different for each page, belongs to that specific page
<NavMenu /> - always the same, belongs to the general layout
<MyPageContent /> - content belongs to specific page

英雄形象几乎是全屏的。如果您想知道为什么<NavMenu /> 会隐藏在全屏英雄图像之后，那是因为当您滚动时，NavMenu 会滚动到视图中，并且无论何时到达页面顶部，它都会保持粘性。以下是此类粘性导航栏的示例：https://codepen.io/bencasalino/pen/MOLQKM

我想在 HeroImage 之后显示 NavMenu。我的问题是弄清楚如何在多个路由页面中显示顶级组件而不重新加载它。我不能将 NavMenu 放在单个页面中，因为如果我更改页面，那会破坏它并每次都创建一个全新的 NavMenu。另外，我不能将 HeroImage 放在 <Nuxt /> 组件之外，因为它属于它自己的特定页面（每个页面的图像都不同）。我想我可以用<teleport> 解决这个问题，它允许使用css 选择器将元素移动到DOM 中的另一个位置。我会做这样的事情：

<teleport to="somewhere_after_the_hero_image" >
    <NavMenu />
</teleport>
<Nuxt /> - my different pages
<Footer />

// Pages would look like this
<HeroImage />
<div class="somewhere_after_the_hero_image"></div>
<PageContent />

问题是 Nuxt 还不允许它，因为它在 Vue 2 上运行，而 <teleport> 是 Vue3 的最新功能。创建此布局的最合乎逻辑的方法是什么？非常感谢！

【问题讨论】：

你试过nuxt中的layout吗？
也许您可以在layouts 文件夹中创建自定义布局，并通过访问this.$route 获取当前路线。然后，在这个自定义布局中，您将拥有 <NavMenu /> 和 <HeroImage />，但将根据路线是动态的（根据 this.$route，您可以将参数传递给 Hero Image） .有帮助吗？

标签： vue.js components nuxt.js

【解决方案1】：

我没有找到完美的答案，但一种方法可能是使用 vue 存储将 (img url) 数据从在 <Nuxt /> 中创建的页面传递给我的 HeroImage 组件。最后，我采用了另一种方法：我的 HeroImage 是在 Nuxt 组件内部创建的，位于菜单下方，然后我使用 Javascript 将所有内容放置到位。

【讨论】：