vue.js - 将 v-transition 应用于 vue.js(v 1.0.1) router-view

Question

我正在构建一个单页应用程序，使用 vue.js 和 vue-router.. 现在链接有效，但我想使用 v-transition 添加转换。

但是根据文档

What’s more important though, is that non-flow-control directives, non-prop attributes and transitions on the component element will be ignored, because there is no root element to bind them to - vue.js components

<router-view class="bounce" v-transition="bounce" transition-mode="out-in"></router-view>

所以从技术上讲，router-view 标签中的 v-transition 将被忽略，因为它是一个 Fragment 实例..

所以知道我可以在哪里放置 v-transition 以在路由更改时应用转换吗？

Answer 1

在你的组件中定义至少一个路由节点:

<router-view class="bounce">
    <div v-transition="bounce" transition-mode="out-in">
    </div>
</router-view>

Vue 需要一个元素插入到 DOM 中，如果你想应用过渡，或者 v-show。