Vue Router 是 Vue.js 的官方路由管理器，它用于構建單頁應用程序。它通過 URL 更新頁面內容，并利用瀏覽器的前進和后退按鈕來使用戶自然地導航應用程序。

Vue Router 的滑動轉場動畫效果是在頁面跳轉時，實現頁面間平滑過渡的效果。當我們通過 Vue Router 跳轉頁面時，路由組件會執行進入和離開動畫，可以實現左滑或右滑的轉場效果。

<transition :name="direction">
<router-view></router-view>
</transition>
export default {
computed: {
direction () {
const currentRouteDepth = this.$route.path.split('/').length
const lastRouteDepth = this.$store.state.app.lastRoute.path.split('/').length
return currentRouteDepth< lastRouteDepth ? 'slide-right' : 'slide-left'
}
}
}

在上面的代碼中，用 <transition> 包裹路由組件，<router-view> 顯示路由組件的內容。<transition> 的 name 是動畫名，這個名字在 CSS 樣式中設置。在 computed 中，使用 $route 獲取當前路由路徑，用 $store.state.app.lastRoute 記錄了上個頁面的路由路徑。

在 CSS 樣式中，我們實現了 slide-right 和 slide-left 兩個方向的過渡效果，將 .slide-left 和 .slide-left-active 兩個 class 分別賦給進入組件的樣式和離開組件的樣式，實現兩個組件的平滑過渡效果。

.slide-left-enter-active, .slide-right-leave-active {
transition: .3s;
position: absolute;
}
.slide-left-enter, .slide-right-leave-active {
transform: translateX(100%);
}
.slide-left-leave-active, .slide-right-enter-active {
transition: .3s;
position: absolute;
}
.slide-left-leave-active, .slide-right-enter {
transform: translateX(-100%);
}

通過這種 Vue Router 右滑的轉場效果，可以進一步提升用戶體驗。使用這種平滑過渡模式，不僅可以增加頁面的美感感受，而且還可以更準確地傳達頁面的元素變換信息。因此，使用 Vue Router 提供的轉場動畫效果，可以使網站更具吸引力并提升用戶體驗。