🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Trong quá trình phát triển ứng dụng Vuejs, việc sử dụng Dynamic Routing là một phần không thể thiếu. Tại Cafedev, chúng tôi luôn khuyến khích cộng đồng 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, dễ dàng mở rộng và quản lý. Bài viết này sẽ giới thiệu về cách sử dụng Dynamic Routing trong Vuejs để tạo ra các ứng dụng linh hoạt và mạnh mẽ. Hãy cùng khám phá chi tiết qua bài viết dưới đây!


Thêm các tuyến đường vào bộ định tuyến của bạn thường được thực hiện thông qua tùy chọn routes, nhưng trong một số tình huống, bạn có thể muốn thêm hoặc loại bỏ các tuyến đường trong khi ứng dụng đã chạy. Ứng dụng với giao diện mở rộng như Vue CLI UI có thể sử dụng điều này để phát triển ứng dụng.

1. Thêm tuyến đường

Routing động được đạt được chủ yếu thông qua hai hàm: router.addRoute() và router.removeRoute(). Chúng chỉ đăng ký một tuyến đường mới, có nghĩa là nếu tuyến đường mới thêm vào khớp với vị trí hiện tại, bạn sẽ cần điều hướng thủ công bằng router.push() hoặc router.replace() để hiển thị tuyến đường mới đó. Hãy xem một ví dụ:
Hãy tưởng tượng rằng bạn có bộ định tuyến sau với một tuyến đường duy nhất:

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

Điều hướng đến bất kỳ trang nào, /about, /store, hoặc /3-tricks-to-improve-your-routing-code đều kết thúc bằng việc hiển thị thành phần Article. Nếu chúng ta đang ở /about và chúng ta thêm một tuyến đường mới:

router.addRoute({ path: '/about', component: About })

Trang vẫn sẽ hiển thị thành phần Article, chúng ta cần gọi router.replace() thủ công để thay đổi vị trí hiện tại và ghi đè lên nơi chúng ta đang (thay vì đẩy một bản ghi mới, kết thúc ở cùng một vị trí hai lần trong lịch sử của chúng ta):

router.addRoute({ path: '/about', component: About })
// we could also use this.$route or useRoute()
router.replace(router.currentRoute.value.fullPath)

Hãy nhớ rằng bạn có thể await router.replace() nếu bạn cần chờ đợi để tuyến đường mới được hiển thị.

2. Thêm tuyến đường bên trong bộ bảo vệ điều hướng

Nếu bạn quyết định thêm hoặc loại bỏ các tuyến đường bên trong một bộ bảo vệ điều hướng, bạn không nên gọi router.replace() mà thay vào đó là kích hoạt một redirection bằng cách trả về vị trí mới:

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // trigger a redirection
    return to.fullPath
  }
})

Ví dụ trên giả định hai điều: đầu tiên, bản ghi tuyến đường mới thêm vào sẽ khớp với vị trí to, dẫn đến một vị trí khác với vị trí mà chúng ta đang cố truy cập. Thứ hai, hasNecessaryRoute() trả về false sau khi thêm tuyến đường mới để tránh sự chuyển hướng vô hạn.
Bởi vì chúng ta đang chuyển hướng, chúng ta đang thay thế việc điều hướng hiện đang diễn ra, hiệu quả là hành vi tương tự như ví dụ được hiển thị trước đó. Trong các kịch bản thực tế, việc thêm thường xuyên xảy ra ngoài các bộ bảo vệ điều hướng, ví dụ: khi một thành phần xem được gắn kết, nó đăng ký các tuyến đường mới.

3. Loại bỏ các tuyến đường

Có một số cách khác nhau để loại bỏ các tuyến đường hiện có:
– Bằng cách thêm một tuyến đường với một tên xung đột. Nếu bạn thêm một tuyến đường có cùng tên với một tuyến đường hiện có, nó sẽ loại bỏ tuyến đường đầu tiên và sau đó thêm tuyến đường:

router.addRoute({ path: '/about', name: 'about', component: About })
  // this will remove the previously added route because they have
  // the same name and names are unique across all routes
  router.addRoute({ path: '/other', name: 'about', component: Other })

– Bằng cách gọi callback được trả về bởi router.addRoute():

const removeRoute = router.addRoute(routeRecord)
  removeRoute() // removes the route if it exists

Điều này hữu ích khi các tuyến đường không có tên
– Bằng cách sử dụng router.removeRoute() để loại bỏ một tuyến đường theo tên của nó:

router.addRoute({ path: '/about', name: 'about', component: About })
  // remove the route
  router.removeRoute('about')

Lưu ý bạn có thể sử dụng Symbols cho tên trong các tuyến đường nếu bạn muốn sử dụng chức năng này nhưng muốn tránh xung đột tên.
Mỗi khi một tuyến đường được loại bỏ, tất cả các tên gọi và con cháu của nó cũng sẽ được loại bỏ cùng với nó.

4. Thêm các tuyến đường lồng nhau

Để thêm các tuyến đường lồng nhau vào một tuyến đường hiện có, bạn có thể chuyển tên của tuyến đường làm tham số đầu tiên cho router.addRoute(), điều này sẽ hiệu quả thêm tuyến đường như đã thêm thông qua children:

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

Điều này tương đương với:

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

5. Xem các tuyến đường hiện có

Vue Router cung cấp cho bạn hai hàm để xem các tuyến đường hiện có:
– router.hasRoute(): kiểm tra xem một tuyến đường có tồn tại không
– router.getRoutes(): nhận một mảng chứa tất cả các bản ghi tuyến đường.

Chúng tôi hy vọng rằng thông qua bài viết về Dynamic Routing trong Vuejs, bạn đã có cái nhìn sâu sắc hơn về cách tận dụng tính linh hoạt của Vue Router để xây dựng các ứng dụng mạnh mẽ và linh hoạt. Tại Cafedev, chúng tôi luôn đề cao việc chia sẻ kiến thức và kỹ năng để cùng nhau phát triển cộng đồng phát triển. Hãy tiếp tục khám phá và ứng dụng những điều bạn học được vào dự án của mình. Cảm ơn bạn đã đồng hành cùng 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!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM