直接在App.vue里面为router-view包裹transition标签即可
<!-- router view显示子页面 -->
<transition name="page">
<router-view></router-view>
</transition>
然后在App.vue里为page添加css,当然可以做修改,路由跳转时会自动读取
.page-enter {
opacity: 0;
transform: translateX(100%);
}
.page-enter-active {
transition: all 0.3s ease-out;
}
.page-leave-to {
opacity: 0;
transform: translateX(-100%);
}
.page-leave-active {
transition: all 0.3s ease-out;
}