解决vue路由页面过渡切换时 两组件同时渲染再渐隐渐显的问题

之前利用的是

 <transition name="fade" mode="in-out">
        <router-view class="right-pane"/>
    </transition>

但是这会导致的效果是两个页面组件

但这显然不是我想要的页面切换过渡效果，应该有的效果是一个组件完全隐退了以后另一个组件在渐显。

看了一下vue的过渡效果文档后知道了解决办法：

 

 

<transition name="component-fade" mode="out-in">
        <router-view class="right-pane"/>
    </transition>

更改一下动画过渡方法就好了。效果这次才是我们想要的。