Vue.js Nuxt：如何在不重新加载的情况下在多个路由页面内显示顶级组件？

我开始了一份新工作，我需要建立一个与nuxt网站。典型的网站在nuxt布局文件中的外观如下：

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

-我的不同路由页面

每当我更改一个页面时，

显示另一个页面，但

保持原样

但是我现在建立的网站需要一个特殊的设计。想象每一页都是这样的： （注意：这纯粹是设计/布局说明，而不是实际的vue组件）

-每个页面不同，属于该特定页面
-始终不变，属于总平面布置
-内容属于特定页面

英雄形象几乎是全屏的。如果您想知道为什么

会隐藏在全屏幕英雄图像之后，那是因为当您滚动时，导航菜单会滚动到视图中，并且每当它到达页面顶部时，它都会保持粘性。下面是此类粘性导航栏的一个示例：

我想在英雄法师之后显示导航菜单。我的问题是如何在不重新加载的情况下在多个路由页面中显示顶级组件。我不能把NavMenu放在单个页面中，因为如果我更改页面，就会破坏它，每次都会创建一个全新的NavMenu。另外，我不能将HeroMage放在

组件之外，因为它属于自己的特定页面（每个页面的图像都不同）。 我想我可以用

解决这个问题，它允许使用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上运行，

是Vue3的最新功能。创建此布局的最合乎逻辑的方法是什么？非常感谢

我没有找到完美的答案，但一种方法可能是使用vue存储将（img url）数据从

中创建的页面传递到我的HeroMage组件。

---

最后，我采用了另一种方法：我的英雄形象是在Nuxt组件中创建的，在菜单下面，然后我使用Javascript将所有内容都放好。

您是否尝试了

numxt

中的

布局

？也许您可以在

layouts

文件夹中创建自定义布局，并通过访问

this.$route

获取当前路线。然后，在此自定义布局中，您将拥有您的

和

，但根据路由，该布局将是动态的（您可以根据

this.$route

向英雄图像传递一个参数）。有帮助吗？

<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 />