路由过渡效果

如果你想要路由组件在切换的时候添加过渡动画的话，需要使用到router-view的插槽，像这样：

<router-view v-slot="{ Component }"> 
    <transition name="fade"> 
        <component :is="Component" /> 
    </transition> 
</router-view>

如果你想让每个路由的组件有不同的过渡，你可以路由元信息中添加过渡的动画样式的类名，动态绑定<transition> 的name属性来实现：

const routes = [ 
    { 
        path: '/custom-transition', 
        component: PanelLeft, 
        meta: { transition: 'slide-left' }, 
    }, 
    { 
        path: '/other-transition', 
        component: PanelRight, 
        meta: { transition: 'slide-right' }, 
    },
]

<router-view v-slot="{ Component, route }"> 
    <!-- 使用任何自定义过渡和回退到 `fade` --> 
    <transition :name="route.meta.transition || 'fade'"> 
        <component :is="Component" /> 
    </transition> 
</router-view>

属性	说明
route	路由信息对象，当前路由的信息
Component	当前路由对应的组件