Trong quá trình phát triển ứng dụng Vuejs, việc ánh xạ động các tuyến đường với params là một phần không thể thiếu. Tại Cafedev, chúng tôi luôn khuyến khích các nhà phát triển tận dụng tính linh hoạt của Vue Router để tạo ra các tuyến đường động, linh hoạt và dễ dàng quản lý. Bài viết này sẽ hướng dẫn bạn cách sử dụng Dynamic Route Matching với Params để tạo ra các ứng dụng Vuejs phong phú và mạnh mẽ. Hãy cùng khám phá chi tiết qua bài viết dưới đây!
Rất thường chúng ta sẽ cần ánh xạ các tuyến đường với mẫu được cung cấp đến cùng một thành phần. Ví dụ, chúng ta có thể có một thành phần User mà nên được hiển thị cho tất cả người dùng nhưng với các ID người dùng khác nhau. Trong Vue Router, chúng ta có thể sử dụng một phân đoạn động trong đường dẫn để đạt được điều đó, chúng ta gọi đó là param:
import User from './User.vue'
// these are passed to `createRouter`
const routes = [
// dynamic segments start with a colon
{ path: '/users/:id', component: User },
]Bây giờ các URL như /users/johnny và /users/jolyne sẽ cùng ánh xạ đến cùng một tuyến đường.
Một param được biểu thị bằng dấu hai chấm :. Khi một tuyến đường được kết hợp, giá trị của params của nó sẽ được tiết lộ dưới dạng route.params trong mọi thành phần. Do đó, chúng ta có thể hiển thị ID người dùng hiện tại bằng cách cập nhật mẫu của User thành này:
<div>
<!-- The current route is accessible as $route in the template -->
User {{ $route.params.id }}
</div>Bạn có thể có nhiều params trong cùng một tuyến đường, và chúng sẽ ánh xạ đến các trường tương ứng trên route.params. Ví dụ:
| pattern | matched path | route.params |
| | | — |
| /users/:username | /users/eduardo | { username: 'eduardo' } |
| /users/:username/posts/:postId | /users/eduardo/posts/123 | { username: 'eduardo', postId: '123' } |
Ngoài route.params, đối tượng route cũng tiết lộ các thông tin hữu ích khác như route.query (nếu có một truy vấn trong URL), route.hash, vv. Bạn có thể xem chi tiết đầy đủ trong Tài liệu tham khảo API.
Bạn có thể tìm thấy một bản demo hoạt động của ví dụ này tại đây.
Nội dung chính
1. Phản ứng với Thay đổi Params
Một điều cần lưu ý khi sử dụng các tuyến đường với params là khi người dùng điều hướng từ /users/johnny đến /users/jolyne, cùng một phiên bản thành phần sẽ được tái sử dụng. Vì cả hai tuyến đường đều hiển thị cùng một thành phần, điều này hiệu quả hơn việc phá hủy phiên bản cũ và sau đó tạo một phiên bản mới. Tuy nhiên, điều này cũng có nghĩa là các hooks vòng đời của thành phần sẽ không được gọi.
Để phản ứng với các thay đổi params trong cùng một thành phần, bạn có thể đơn giản là theo dõi bất cứ điều gì trên đối tượng route, trong tình huống này là route.params:
code-group
[Composition API]
<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(() => route.params.id, (newId, oldId) => {
// react to route changes...
})
</script>[Options API]
<script>
export default {
created() {
this.$watch(
() => this.$route.params.id,
(newId, oldId) => {
// react to route changes...
}
)
},
}
</script>Hoặc, sử dụng beforeRouteUpdate bộ bảo vệ điều hướng, cũng cho phép bạn hủy bỏ việc điều hướng:
code-group
[Composition API]
<script setup>
import { onBeforeRouteUpdate } from 'vue-router'
// ...
onBeforeRouteUpdate(async (to, from) => {
// react to route changes...
userData.value = await fetchUser(to.params.id)
})
</script>[Options API]
<script>
export default {
async beforeRouteUpdate(to, from) {
// react to route changes...
this.userData = await fetchUser(to.params.id)
},
// ...
}
</script>2. Bắt tất cả / Tuyến đường không tìm thấy 404
Các params thông thường chỉ khớp với các ký tự giữa các đoạn url, phân tách bởi /. Nếu chúng ta muốn khớp với bất cứ thứ gì, chúng ta có thể sử dụng một param regexp tùy chỉnh bằng cách thêm regexp vào trong dấu ngoặc đơn ngay sau param:
const routes = [
// will match everything and put it under `route.params.pathMatch`
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
// will match anything starting with `/user-` and put it under `route.params.afterUser`
{ path: '/user-:afterUser(.*)', component: UserGeneric },
]Trong tình huống cụ thể này, chúng ta đang sử dụng một regexp tùy chỉnh giữa dấu ngoặc đơn và đánh dấu pathMatch param như là có thể lặp lại tùy chọn. Điều này cho phép chúng ta điều hướng trực tiếp đến tuyến đường nếu cần bằng cách chia path thành một mảng:
router.push({
name: 'NotFound',
// preserve current path and remove the first char to avoid the target URL starting with `//`
params: { pathMatch: route.path.substring(1).split('/') },
// preserve existing query and hash if any
query: route.query,
hash: route.hash,
})Xem thêm trong phần params lặp lại.
Nếu bạn đang sử dụng Chế độ Lịch sử, đảm bảo tuân thủ các hướng dẫn để cấu hình máy chủ của bạn đúng cách.
3. Mẫu khớp tiên tiến
Vue Router sử dụng cú pháp khớp đường dẫn riêng của mình, được lấy cảm hứng từ cú pháp được sử dụng bởi express, vì vậy nó hỗ trợ nhiều mẫu khớp tiên tiến như params tùy chọn, zero hoặc nhiều / một hoặc nhiều yêu cầu, và thậm chí là các mẫu regex tùy chỉnh. Vui lòng kiểm tra tài liệu Khớp Tiên Tiến để khám phá chúng.
Chúng ta đã thấy qua bài viết này rằng việc sử dụng Dynamic Route Matching với Params trong Vue Router mang lại cho ứng dụng của bạn sự linh hoạt và mạnh mẽ. Tại Cafedev, chúng tôi hy vọng rằng những hướng dẫn và ví dụ đã được chia sẻ sẽ giúp bạn hiểu rõ hơn về cách tận dụng tính năng này để tạo ra các tuyến đường động và linh hoạt cho ứng dụng Vuejs của mình. Hãy tiếp tục theo dõi để cập nhật thêm nhiều kiến thức và kỹ thuật mới từ Cafedev!
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!
