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 Trường Meta của Route trong Router Vuejs. Trường Meta là một tính năng quan trọng giúp bạn gắn thông tin tùy ý vào các route như tên chuyển đổi, quyền truy cập, v.v. Hãy cùng tìm hiểu cách sử dụng và tận dụng các trường Meta của Route để điều hướng ứng dụng web của bạn một cách linh hoạt và hiệu quả!
Đôi khi, bạn có thể muốn gắn thông tin tùy ý vào các route như: tên chuyển đổi, hoặc vai trò để kiểm soát ai có thể truy cập vào route, v.v. Điều này có thể được thực hiện thông qua thuộc tính meta mà chấp nhận một đối tượng các thuộc tính và có thể được truy cập trên vị trí của route và các bộ canh bảo vệ điều hướng. Bạn có thể định nghĩa các thuộc tính meta như sau:
const routes = [
{
path: '/posts',
component: PostsLayout,
children: [
{
path: 'new',
component: PostsNew,
// only authenticated users can create posts
meta: { requiresAuth: true },
},
{
path: ':id',
component: PostsDetail,
// anybody can read a post
meta: { requiresAuth: false },
},
],
},
]Vậy làm thế nào để chúng ta truy cập vào trường meta này?
Đầu tiên, mỗi đối tượng route trong cấu hình routes được gọi là một bản ghi route. Bản ghi route có thể được lồng nhau. Do đó khi một route được khớp, nó có thể khớp được nhiều hơn một bản ghi route.
Ví dụ, với cấu hình route ở trên, URL /posts/new sẽ khớp với cả bản ghi route cha (path: '/posts') và bản ghi route con (path: 'new').
Tất cả các bản ghi route được khớp bởi một route được tiếp cận trên đối tượng route (và cũng đối tượng route trong các bộ canh bảo vệ điều hướng) như một Mảng route.matched. Chúng ta có thể lặp qua mảng đó để kiểm tra tất cả các trường meta, nhưng Vue Router cũng cung cấp cho bạn một route.meta là một hợp nhất không đệ quy của tất cả các trường meta từ cha đến con. Điều này có nghĩa là bạn có thể viết đơn giản như sau:
router.beforeEach((to, from) => {
// instead of having to check every route record with
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth && !auth.isLoggedIn()) {
// this route requires auth, check if logged in
// if not, redirect to login page.
return {
path: '/login',
// save the location we were at to come back later
query: { redirect: to.fullPath },
}
}
})1. TypeScript
Có thể gán kiểu cho trường meta bằng cách mở rộng interface RouteMeta từ vue-router:
// This can be directly added to any of your `.ts` files like `router.ts`
// It can also be added to a `.d.ts` file. Make sure it's included in
// project's tsconfig.json "files"
import 'vue-router'
// To ensure it is treated as a module, add at least one `export` statement
export {}
declare module 'vue-router' {
interface RouteMeta {
// is optional
isAdmin?: boolean
// must be declared by every route
requiresAuth: boolean
}
}Cảm ơn bạn đã đọc bài viết về việc sử dụng Trường Meta của Route trong Router Vuejs trên Cafedev. 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 tận dụng các trường Meta này để điều hướng và quản lý ứng dụng Vuejs của bạn một cách linh hoạt và hiệu quả. Hãy áp dụng những kiến thức đã học để xây dựng các ứng dụng web mạnh mẽ trên nền tảng Vuejs. 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 khác nhé!
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!
