javascript - Vue.js 过渡问题

Question

我目前正在创建应包含 loginView、homeView 和位于路由器外部的 v-app-bar 的应用程序，以便它可以在除 loginView 之外的每个页面上使用。

我想为它添加一些漂亮的过渡，但我对应用栏有疑问。路由器 View 具有平滑的过渡，但 v-app-bar 内部似乎有一些硬编码的过渡，并且没有支持为其提供自定义过渡。我怎样才能强制它使用我的自定义过渡？

<template>
 <v-app id="app"> 
  <v-content class="app-main">
    <transition name="fade" mode="out-in">
      <v-app-bar v-if='this.$router.currentRoute.name != "loginView"' color="indigo darken-2" dark>
      </v-app-bar>
     </transition>
     <transition name="fade" mode="out-in">
       <router-view class="view"/>
     </transition>
     <c-alert-bar class="alert"/>
  </v-content>
 </v-app>
</template>

Answer 1

好的，我解决了过渡问题，但没有真正解决真正的问题，而是做了一个变通办法:

1. 我从 App.vue 中删除了 v-app-bar
2. 我在 loginView 和 homeView 之间创建了额外的路由
3. 我让 homeView 成为这个附加路由的子级，并将 v-app-bar 放在里面(所以这个中间路由里面有 v-app-bar 和 router-view)
4. 我对主路由器 View 和这个新的内部路由器 View 进行了相同的转换
5. 我从 loginView 直接移动到 homeView，但是 homeView 作为这个中间路径的子级将他的父级和他自己拖在一起，所以我有来自他的父级的 v-app-bar 和下面的 homeView 的内容，一切都根据给定的转换移动

从用户的 Angular 来看，几乎没有任何变化，因为我像以前一样从“/”移动到“/home”。唯一不同的是，所有适合 v-app-bar 的新页面都必须添加为这个 intermediate-ghost-page 的子页面，因为没有它 v-app-bar 将不会从那里被拖走。但实际上说实话，这甚至不是一件坏事，因为它会迫使我将页面分组到某个父级下，这样以后代码就不会那么乱了。