nuxt.js - Nuxt.js 中特定布局的自定义转换

Question

在我的 Nuxt.js 应用程序中，我的嵌套路由之一的布局与页面的其余部分完全不同。为了使过渡不那么刺耳，我只想将自定义过渡应用于此页面/布局。这是一个组合缩放/淡入淡出动画，有点像 Windows 10 中的窗口，所以看起来新页面是在旧页面之上打开的。一旦打开过渡完成，旧页面就会从 DOM 中删除，因为它是一个过渡。退出显然是相反的，进入页面加载在退出页面下方，然后播放退出过渡，给人一种页面关闭在一直存在的页面顶部的错觉。

我通过将顶层包装<router-view />在过渡元素中并仅在该特殊页面（范围）上指定过渡 CSS，使此设置在普通的 Vue 应用程序中工作。

使用 Nuxt，我无法让它像那样工作。我在我的中设置了布局转换nuxt.config.js：

layoutTransition: {
  name: "layout",
  mode: "in-out",
},

如果我在全局范围内设置过渡 CSS，我会在每个页面上得到效果（显然），这是我不想要的。如果我将其范围设置为目标布局，它根本不起作用。

我能想到但我不喜欢的解决方法：

1）放弃布局系统，对所有页面使用一种布局，然后使用标准页面转换。我不喜欢它，因为据我所知，这意味着在每个页面上手动定义我的布局。这会导致大量的重复代码和笨拙的代码结构，这是自找麻烦。我将不得不与 Nuxt 的自动路由进行很多斗争，我不想这样做，因为我喜欢自动路由。

1b) 当然，我也可以想出一个布局组件并将整个站点内容作为一个插槽传递给该组件，这将使布局更容易且不易出错。这样，我基本上会创建自己的布局系统并绕过 Nuxt 的布局系统。所以我会改变整个网站的架构，添加样板文件并绕过部分框架，只是为了在一个页面上进行一次转换。感觉有点矫枉过正。

2）使用实际覆盖而不是单独的页面。我不喜欢它，因为它没有映射到路线，因此无法为该页面添加书签或使用历史记录进行导航。此外，“下方”页面可能有些复杂，因此出于性能原因，我不想加载它（是的，我可以用v-if它来删除它，使代码更加繁琐）。

3）只是不要使用过渡。到目前为止，它是整个网站上唯一的一个，所以至少没有过渡是一致的。然而，由于站点的其余部分非常统一，具有持久的页眉和页脚以及屏幕上的大量内容，并且“特殊”页面大部分是空的，只有一个文本编辑器以允许集中工作，这种过渡非常不和谐，而且您似乎离开了该网站。另外，当我已经让它在普通的 Vue 中工作时（没有双关语），我不愿意接受答案是“这是不可能的”。

简而言之：我真的希望它能够正常工作，而不是对抗 Nuxt 或损害用户体验。有任何想法吗？

标签： nuxt.js