Question

我目前正在使用Nuxt.js，这真棒！我为我创建的每个页面做了一些转换。但是，当您从存档转到页面时，我想调用特定的转换。例如：

在存档中，您有两个href，每个href都转到另一个页面。所以你有不同的路线，如：archive - ＆gt;第1页和存档 - ＆gt;第2页。我希望在归档到第1页和第2页时转换归档。我需要为每个路由调用特定的转换。但我在文档中找不到任何有用的东西。有人有想法或榜样吗？

Answer 1

我认为你走在正确的轨道上。

基本上，您只想将转换键作为函数调用。将'from'视为存档页面，将'to'视为下一页。你可以这样做：

transition (to, from) {
  if (to.path === '/page-1'){
      return 'transition-one' 
  } else if (to.path === '/page-2') {
      return 'transition-two'
  }
}

或伪代码......

// If the 'to' path is the same as /path-1
    // Do the transition with the name 'transition-one'
// Otherwise, if the 'to' path is the same as /path-2
    // Do the transition with the name 'transition-two'.

您可以将此转换功能放在模块导出中，与生命周期挂钩相同。这有点帮助吗？

Answer 2

如果使用布局，则在<transition>之间插入<nuxt/>就足够了。请参阅vue official doc

模板

 <v-content>
  <transition name="fade">
    <nuxt />
  </transition>
</v-content>

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;

Nuxt.js - 为每条路线进行不同的过渡

2 个答案: