Router Vuejs với các liên kết hoạt động là một chủ đề quan trọng trong việc xây dựng các ứng dụng web động và mượt mà. Tại Cafedev, chúng tôi sẽ hướng dẫn bạn cách sử dụng RouterLink trong Vuejs để tạo các liên kết điều hướng hiệu quả. Bạn sẽ học cách định dạng và quản lý các liên kết hoạt động, từ đó cải thiện trải nghiệm người dùng và khả năng tương tác của ứng dụng. Hãy cùng khám phá chi tiết qua bài viết dưới đây!
Trong các ứng dụng, thường có một thành phần điều hướng hiển thị danh sách các thành phần RouterLink. Trong danh sách đó, chúng ta có thể muốn tạo kiểu cho các liên kết đến tuyến đường hiện tại khác với các liên kết khác.
Thành phần RouterLink thêm hai lớp CSS vào các liên kết hoạt động, router-link-active và router-link-exact-active. Để hiểu sự khác biệt giữa chúng, trước tiên chúng ta cần xem Vue Router quyết định như thế nào rằng một liên kết là hoạt động.
Nội dung chính
1. Khi nào các liên kết hoạt động?
Một RouterLink được coi là hoạt động nếu:
1. Nó khớp với cùng một bản ghi tuyến đường (tức là tuyến đường đã được cấu hình) như vị trí hiện tại. 2. Nó có cùng giá trị cho params như vị trí hiện tại.
Nếu bạn đang sử dụng các tuyến đường lồng nhau, bất kỳ liên kết nào đến các tuyến đường tổ tiên cũng sẽ được coi là hoạt động nếu các params liên quan khớp.
Các thuộc tính tuyến đường khác, chẳng hạn như query, không được tính đến.
Đường dẫn không nhất thiết phải khớp hoàn toàn. Ví dụ, việc sử dụng một alias vẫn được coi là một sự khớp, miễn là nó giải quyết đến cùng một bản ghi tuyến đường và params.
Nếu một tuyến đường có một redirect, nó sẽ không được theo dõi khi kiểm tra xem một liên kết có hoạt động hay không.
2. Liên kết hoạt động chính xác
Một sự khớp chính xác không bao gồm các tuyến đường tổ tiên.
Hãy tưởng tượng chúng ta có các tuyến đường sau:
const routes = [
{
path: '/user/:username',
component: User,
children: [
{
path: 'role/:roleId',
component: Role,
}
]
}
]Sau đó, hãy xem xét hai liên kết này:
<RouterLink to="/user/erina">
User
</RouterLink>
<RouterLink to="/user/erina/role/admin">
Role
</RouterLink>Nếu đường dẫn vị trí hiện tại là /user/erina/role/admin thì cả hai sẽ được coi là hoạt động, vì vậy lớp router-link-active sẽ được áp dụng cho cả hai liên kết. Nhưng chỉ có liên kết thứ hai được coi là chính xác, vì vậy chỉ liên kết thứ hai mới có lớp router-link-exact-active.
3. Cấu hình các lớp
Thành phần RouterLink có hai thuộc tính, activeClass và exactActiveClass, có thể được sử dụng để thay đổi tên của các lớp được áp dụng:
<RouterLink
activeClass="border-indigo-500"
exactActiveClass="border-indigo-700"
...Tên lớp mặc định cũng có thể được thay đổi toàn cầu bằng cách truyền các tùy chọn linkActiveClass và linkExactActiveClass vào createRouter():
const router = createRouter({
linkActiveClass: 'border-indigo-500',
linkExactActiveClass: 'border-indigo-700',
// ...
})Xem Mở rộng RouterLink để biết các kỹ thuật tùy chỉnh nâng cao hơn bằng cách sử dụng API v-slot.
Qua bài viết này, hy vọng bạn đã nắm rõ cách sử dụng RouterLink trong Vuejs để tạo các liên kết hoạt động và tùy chỉnh chúng theo ý muốn. Những kỹ thuật này sẽ giúp ứng dụng của bạn trở nên chuyên nghiệp và thân thiện hơn với người dùng. Nếu bạn có bất kỳ câu hỏi hoặc thắc mắc nào, đừng ngần ngại liên hệ với Cafedev. Chúng tôi luôn sẵn sàng hỗ trợ bạn trong hành trình học tập và phát triển. Cảm ơn bạn đã theo dõi!
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!
