Chào mừng bạn đến với Cafedev, nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ, lập trình và phát triển web. Trong bài viết này, chúng tôi sẽ khám phá về việc sử dụng Router Vuejs với các chức năng Chuyển hướng và Bí danh. Với Router Vuejs, bạn có thể tạo ra các tuyến đường linh hoạt và mạnh mẽ trong ứng dụng Vue của mình, giúp tạo ra trải nghiệm người dùng tốt hơn và quản lý dễ dàng hơn. Hãy cùng tìm hiểu cách áp dụng những tính năng này vào dự án của bạn!
Nội dung chính
1. Chuyển hướng
Chuyển hướng cũng được thực hiện trong cấu hình routes. Để chuyển hướng từ /home đến /:
const routes = [{ path: '/home', redirect: '/' }]Chuyển hướng cũng có thể nhắm vào một tuyến đường có tên:
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]Hoặc thậm chí sử dụng một hàm cho việc chuyển hướng động:
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// the function receives the target route as the argument
// we return a redirect path/location here.
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]Lưu ý rằng Các lọc điều hướng không được áp dụng trên tuyến đường chuyển hướng, chỉ áp dụng trên mục tiêu của nó. Ví dụ, trong ví dụ trên, việc thêm một lọc beforeEnter cho tuyến đường /home sẽ không có bất kỳ hiệu lực nào.
Khi viết một redirect, bạn có thể bỏ qua tùy chọn component vì nó không bao giờ được truy cập trực tiếp nên không có thành phần để hiển thị. Điều duy nhất ngoại lệ là các tuyến con: nếu một bản ghi tuyến đường có children và một thuộc tính redirect, nó cũng nên có một thuộc tính component.
Chuyển hướng tương đối
Cũng có thể chuyển hướng đến một vị trí tương đối:
const routes = [
{
// will always redirect /users/123/posts to /users/123/profile
path: '/users/:id/posts',
redirect: to => {
// the function receives the target route as the argument
// a relative location doesn't start with `/`
// or { path: 'profile'}
return 'profile'
},
},
]2. Bí danh
Một chuyển hướng có nghĩa là khi người dùng truy cập /home, URL sẽ được thay thế bằng /, và sau đó được khớp với /. Nhưng bí danh là gì?
Một bí danh của / là /home có nghĩa là khi người dùng truy cập /home, URL vẫn là /home, nhưng nó sẽ được khớp như người dùng đang truy cập /.
Câu trên có thể được biểu diễn trong cấu hình tuyến đường như sau:
const routes = [{ path: '/', component: Homepage, alias: '/home' }]Một bí danh cho phép bạn tự do ánh xạ một cấu trúc UI vào một URL tùy ý, thay vì bị ràng buộc bởi cấu trúc lồng nhúng của cấu hình. Hãy bắt đầu bí danh bằng / để làm cho đường dẫn tuyệt đối trong các tuyến đường lồng nhúng. Bạn thậm chí có thể kết hợp cả hai và cung cấp nhiều bí danh với một mảng:
const routes = [
{
path: '/users',
component: UsersLayout,
children: [
// this will render the UserList for these 3 URLs
// - /users
// - /users/list
// - /people
{ path: '', component: UserList, alias: ['/people', 'list'] },
],
},
]Nếu tuyến đường của bạn có tham số, hãy đảm bảo bao gồm chúng trong mọi bí danh tuyệt đối:
const routes = [
{
path: '/users/:id',
component: UsersByIdLayout,
children: [
// this will render the UserDetails for these 3 URLs
// - /users/24
// - /users/24/profile
// - /24
{ path: 'profile', component: UserDetails, alias: ['/:id', ''] },
],
},
]Lưu ý về SEO: khi sử dụng bí danh, hãy đảm bảo xác định liên kết kinh điển.
Như vậy, đó là một cái nhìn tổng quan về cách sử dụng Router Vuejs với các tính năng Chuyển hướng và Bí danh. Tại Cafedev, chúng tôi luôn mong muốn chia sẻ những kiến thức mới nhất và hữu ích nhất với cộng đồng phát triển web. Hy vọng rằng sau khi đọc bài viết này, bạn đã có cái nhìn rõ ràng hơn về cách tối ưu hóa việc quản lý định tuyến trong ứng dụng Vue của mình. Hãy tiếp tục theo dõi chúng tôi tại Cafedev để cập nhật thêm nhiều thông tin thú vị 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!
