Chào mừng đến với Cafedev, nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết này, chúng ta sẽ khám phá về việc sử dụng Các Route có Tên trong Router Vuejs. Các Route có Tên giúp bạn quản lý route một cách dễ dàng hơn bằng cách sử dụng tên thay vì đường dẫn cứng. Hãy cùng tìm hiểu cách áp dụng và tận dụng tính năng này để tạo ra các ứng dụng Vuejs linh hoạt và dễ bảo trì hơn!
Khi tạo một route, chúng ta có thể tùy chọn đặt cho route một name:
const routes = [
{
path: '/user/:username',
name: 'profile', // [!code highlight]
component: User
}
]Sau đó, chúng ta có thể sử dụng name thay vì path khi truyền prop to cho :
<router-link :to="{ name: 'profile', params: { username: 'erina' } }">
User profile
</router-link>Ví dụ trên sẽ tạo một liên kết đến /user/erina.
– Xem ví dụ trong Playground.
Việc sử dụng name có nhiều ưu điểm:
– Không cần phải ghi cứng URL.
– Tự động mã hóa các params.
– Tránh được việc nhập sai URL.
– Bỏ qua việc xếp hạng path, ví dụ như hiển thị một route có xếp hạng thấp hơn nhưng khớp với cùng một path.
Mỗi tên phải là duy nhất trên tất cả các routes. Nếu bạn thêm cùng một tên cho nhiều routes, router sẽ chỉ giữ lại tên cuối cùng. Bạn có thể đọc thêm về điều này trong phần Dynamic Routing.
Có các phần khác của Vue Router mà cũng có thể truyền một vị trí, ví dụ như các phương thức router.push() và router.replace(). Chúng ta sẽ đi vào chi tiết hơn về những phương thức này trong hướng dẫn về điều hướng theo chương trình. Giống như prop to, những phương thức này cũng hỗ trợ truyền một vị trí bằng name:
router.push({ name: 'profile', params: { username: 'erina' } })Cảm ơn bạn đã thăm Cafedev và đọc bài viết về Các Route có Tên trong Router Vuejs. Hy vọng rằng những thông tin chúng tôi chia sẻ đã giúp bạn hiểu rõ hơn về cách sử dụng và ưu điểm của các route có tên trong quá trình phát triển ứng dụng Vuejs của bạn. Hãy áp dụng những kiến thức đã học để tối ưu hóa quy trình phát triển và tạo ra các ứng dụng web mạnh mẽ và linh hoạt. Hãy tiếp tục đồng hành cùng Cafedev để cập nhật thêm nhiều thông tin hữu ích và bổ í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!
