Chào mừng đến với Cafedev, nơi chúng tôi không chỉ chia sẻ kiến thức về công nghệ mà còn tạo ra cơ hội để bạn khám phá và tiếp cận những công nghệ mới nhất. Trong bài viết này, chúng tôi sẽ khám phá về việc sử dụng cú pháp phù hợp của tuyến đường trong Router Vuejs. Với sự linh hoạt của Vue Router, bạn có thể tạo ra các tuyến đường phù hợp với nhu cầu cụ thể của dự án của mình, từ các tuyến đường tĩnh đến các tuyến đường động. Hãy cùng tìm hiểu chi tiết trong bài viết dưới đây!
Hầu hết các ứng dụng sẽ sử dụng các tuyến đường tĩnh như /about và tuyến đường động như /users/:userId như chúng ta vừa thấy ở Phù hợp Tuyến đường Động, nhưng Vue Router còn có nhiều tính năng hơn nữa!
lời khuyên Vì tính đơn giản, tất cả các bản ghi tuyến đường đều không bao gồm thuộc tính component để tập trung vào giá trị path.
Nội dung chính
1. Regex tùy chỉnh trong các tham số
Khi định nghĩa một tham số như :userId, chúng tôi sử dụng regex sau đây ([^/]+) (ít nhất một ký tự không phải là dấu gạch chéo /) để trích xuất tham số từ URL. Điều này hoạt động tốt trừ khi bạn cần phân biệt hai tuyến đường dựa trên nội dung của tham số. Hãy tưởng tượng hai tuyến đường /:orderId và /:productName, cả hai đều sẽ khớp với các URL giống nhau, vì vậy chúng ta cần một cách để phân biệt chúng. Cách đơn giản nhất là thêm một phần tĩnh vào đường dẫn để phân biệt chúng:
const routes = [
// matches /o/3549
{ path: '/o/:orderId' },
// matches /p/books
{ path: '/p/:productName' },
]Nhưng trong một số tình huống, chúng ta không muốn thêm phần tĩnh đó /o/p. Tuy nhiên, orderId luôn là một số trong khi productName có thể là bất cứ điều gì, vì vậy chúng ta có thể chỉ định một regex tùy chỉnh cho một tham số trong dấu ngoặc đơn:
const routes = [
// /:orderId -> matches only numbers
{ path: '/:orderId(\\d+)' },
// /:productName -> matches anything else
{ path: '/:productName' },
]Bây giờ, khi đi đến /25 sẽ khớp với /:orderId trong khi đi đến bất kỳ thứ gì khác sẽ khớp với /:productName. Thậm chí thứ tự của mảng routes cũng không quan trọng!
lời khuyên Đảm bảo thoát các dấu gạch chéo (\) như chúng tôi đã làm với \d (trở thành \\d) để thực sự truyền ký tự gạch chéo trong một chuỗi trong JavaScript.
2. Các tham số lặp lại
Nếu bạn cần khớp các tuyến đường với nhiều phần như /first/second/third, bạn nên đánh dấu một tham số là có thể lặp lại với * (0 hoặc nhiều) và + (1 hoặc nhiều):
const routes = [
// /:chapters -> matches /one, /one/two, /one/two/three, etc
{ path: '/:chapters+' },
// /:chapters -> matches /, /one, /one/two, /one/two/three, etc
{ path: '/:chapters*' },
]Điều này sẽ cung cấp cho bạn một mảng các tham số thay vì một chuỗi và cũng yêu cầu bạn truyền một mảng khi sử dụng các tuyến đường có tên:
// given { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// produces /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// produces /a/b
// given { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// throws an Error because `chapters` is emptyNhững điều này cũng có thể được kết hợp với một regex tùy chỉnh bằng cách thêm chúng sau dấu ngoặc đóng:
const routes = [
// only match numbers
// matches /1, /1/2, etc
{ path: '/:chapters(\\d+)+' },
// matches /, /1, /1/2, etc
{ path: '/:chapters(\\d+)*' },
]3. Tùy chọn tuyến đường nhạy cảm và nghiêm ngặt
Theo mặc định, tất cả các tuyến đường đều không phân biệt chữ hoa chữ thường và khớp với các tuyến đường có hoặc không có dấu gạch chéo ở cuối. Ví dụ, một tuyến đường /users khớp với /users, /users/, và thậm chí /Users/. Hành vi này có thể được cấu hình với các tùy chọn strict và sensitive, chúng có thể được đặt cả ở cấp độ router và tuyến đường:
const router = createRouter({
history: createWebHistory(),
routes: [
// will match /users/posva but not:
// - /users/posva/ because of strict: true
// - /Users/posva because of sensitive: true
{ path: '/users/:id', sensitive: true },
// will match /users, /Users, and /users/42 but not /users/ or /users/42/
{ path: '/users/:id?' },
],
strict: true, // applies to all routes
})4. Tham số tùy chọn
Bạn cũng có thể đánh dấu một tham số là tùy chọn bằng cách sử dụng bộ chỉnh sửa ? (0 hoặc 1):
const routes = [
// will match /users and /users/posva
{ path: '/users/:userId?' },
// will match /users and /users/42
{ path: '/users/:userId(\\d+)?' },
]Lưu ý rằng * kỹ thuật cũng đánh dấu một tham số là tùy chọn nhưng tham số ? không thể được lặp lại.
5. Gỡ lỗi
Nếu bạn cần tìm hiểu cách các tuyến đường của bạn được biến đổi thành một regex để hiểu tại sao một tuyến đường không khớp hoặc, để báo cáo một lỗi, bạn có thể sử dụng công cụ xếp hạng đường dẫn. Nó hỗ trợ chia sẻ tuyến đường của bạn qua URL.
Như vậy, chúng ta đã khám phá qua những khía cạnh thú vị của Router Vuejs với cú pháp phù hợp của các tuyến đường. Tại Cafedev, chúng tôi luôn dành sự quan tâm đặc biệt để chia sẻ những kiến thức và kinh nghiệm mới nhất về lập trình và phát triển web. Hy vọng rằng thông qua bài viết này, bạn đã có thêm kiến thức và hiểu biết để áp dụng vào dự án của mình. Đừng quên theo dõi chúng tôi tại Cafedev để cập nhật thêm nhiều thông tin bổ ích và 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!
