Chào mừng đến với Cafedev, nơi chúng tôi không chỉ chia sẻ kiến thức mới nhất về công nghệ mà còn giới thiệu những kỹ thuật và tính năng mới trong lập trình web. Trong bài viết này, chúng ta sẽ khám phá về Router Vuejs với chuyển động, một tính năng quan trọng giúp tạo ra các hiệu ứng mượt mà và sinh động trong việc điều hướng giữa các trang của ứng dụng Vuejs của bạn. Hãy cùng tìm hiểu cách sử dụng chuyển động trong Vue Router để làm cho trải nghiệm của người dùng trở nên thú vị hơn!
Để sử dụng chuyển động trên các thành phần tuyến đường của bạn và tạo hiệu ứng cho việc điều hướng, bạn cần sử dụng <RouterView> slot:
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>Tất cả các API chuyển động hoạt động giống nhau ở đây
Nội dung chính
1. Chuyển đổi Theo Tuyến Đường
Sử dụng cách trên sẽ áp dụng cùng một chuyển động cho tất cả các tuyến đường. Nếu bạn muốn mỗi thành phần tuyến đường có các chuyển động khác nhau, bạn có thể kết hợp trường meta và một name động trên <transition>::
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 }">
<!-- Use a custom transition or fallback to `fade` -->
<transition :name="route.meta.transition || 'fade'">
<component :is="Component" />
</transition>
</router-view>2. Chuyển động Động Dựa trên Tuyến Đường
Cũng có thể xác định chuyển động sử dụng động dựa trên mối quan hệ giữa tuyến đường đích và tuyến đường hiện tại. Sử dụng một đoạn mã rất tương tự với đoạn mã ngay trước đó:
<!-- use a dynamic transition name -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition">
<component :is="Component" />
</transition>
</router-view>Chúng ta có thể thêm một kết nối sau điều hướng để động dẻo thêm thông tin vào trường meta dựa trên độ sâu của tuyến đường
router.afterEach((to, from) => {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})3. Bắt Buộc Một Chuyển Động giữa các Lần Sử Dụng Lại Các Chế Độ Xem
Vue có thể tự động sử dụng lại các thành phần giống nhau, tránh bất kỳ chuyển động nào. May mắn thay, có thể thêm thuộc tính key để bắt buộc các chuyển động. Điều này cũng cho phép bạn kích hoạt các chuyển động trong khi vẫn ở trên cùng một tuyến đường với các tham số khác nhau:
<router-view v-slot="{ Component, route }">
<transition name="fade">
<component :is="Component" :key="route.path" />
</transition>
</router-view>Như vậy, chúng ta đã khám phá qua những tính năng thú vị của Router Vuejs với chuyển động. Tại Cafedev, chúng tôi luôn không ngừng tìm hiểu và chia sẻ những kiến thức mới nhất để giúp cộng đồng phát triển web ngày càng phát triển mạnh mẽ. Hy vọng rằng thông qua bài viết này, bạn đã có cái nhìn rõ ràng hơn về cách sử dụng chuyển động để tạo ra trải nghiệm người dùng tốt hơn trên các ứng dụng Vuejs của mình. Đừng quên tiếp tục theo dõi Cafedev để cập nhật thêm nhiều thông tin và hướng dẫn hữu ích khác!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
