时间戳

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

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

问题描述

我开始了一份新工作，我需要用 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 的最新功能。创建此布局的最合乎逻辑的方法是什么？提前谢谢了 ！

标签： vue.jscomponentsnuxt.js

解决方案

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

推荐阅读