Vue – Router

Trong ứng dụng web javascript, router là phần dùng để đồng bộ hoá phần xem được hiển thị hiện tại với nội dung thanh bar địa chỉ trình duyệt. Nói cách khác, router là phần làm cho url thay đổi khi bạn click vào cái gì đó trên trang web và giúp hiển thị chính xác HTML khi điều hướng đến URL cụ thể.

Sau đây là một số đặc điểm của router:

  • Mapping route và view lồng nhau
  • Nó là một module, thành phần dựa trên cấu hình router
  • Tham số router, câu truy vấn, các ký tự đại diện
  • Xem hiệu ứng hoán chuyển được cung cấp bởi vuejs
  • Có điều khiển chuyển hướng
  • Link tự động hoạt có hiệu lực với class css
  • Có chế độ lịch sử HTML5 hoặc chế độ hash, tự động fallback trong IE9.

Tạo vue project

Tạo một project cho vue sử dụng Vue CLI. Nếu bạn chưa cài đặt, thì sử dụng câu lệnh như sau:

Câu lệnh trên cần được chạy với quyền là Administrator

Sau đó tạo một project mới bằng câu lệnh như sau:

Tiếp theo chuyển vào bên trong project

Cài đặt vue router

Mặc dù chúng ta có thể cài đặt vue-router trong mặc định khi tạo một dự án mới, nhưng chúng ta sẽ cài tách biệt ra trong bài hướng dẫn này. Chạy câu lệnh sau để cài đặt:

Bây giờ thì chúng ta có thể import router bên trong ứng dụng Vue. Tiếp theo thêm đoạn code sau vào trong file main.js trong thư mục src

Cơ bản về router

Trong thư mục src, tạo một file routes.js với nội dung như sau:

Trong tương lai, chúng ta sẽ tạo các route bên trong file này. Import file vào trong file main.js

Đoạn code trên, chúng ta đã truyền vào obejct router khi tạo một vue instance mới.

Tạo các component của vue

Chúng ta sẽ tạo 3 component mới trong thư mục src > components

Home.vue

Register.vue

Login.vue

Sau khi tạo xong, import tất cả các component này vào trong file src > routes.js. Định nghĩa các route cho mỗi component.

Tiếp theo mở lại file main.js,  tạo một VueRouter instance và cập nhập lại route object

Chúng ta cũng cần tạo các đường link trên trang web để có thể link đến 3 component bên trên. Chúng ta cần thêm <route-view> component vào trong file src > App.vue

Ở đây, chúng ta tạo một nav, sử dụng <router-link>, giúp chuyển đổi các component bằng nav

Lưu các file này và mở terminal bật môi trường development server

Mở đường dẫn sau trên trình duyệt http://localhost:8080, màn hình Home component sẽ được tạo ra

Chúng ta đang sử dụng route chế độ hash, thường dùng để xây dựng các ứng dụng SPA

Chế độ route sử dụng lịch sử HTML5

Chúng ta có thể chuyển sang chế độ lịch sử HTML5. Mặc định vue sẽ sử dụng chế đọ Hash. Chúng ta nói với Vue sửu dụng chế độ lịch sử HTML5

Chúng ta sẽ sửa trong file main.js

Route động

Các ví dụ trên chỉ ra phần hiển thị view khác nhau dựa trên URL như là /, /register, và các route.

Chúng ta có thể thực hiện các phần động. Ở bên trên chỉ là các phần tĩnh

Chúng ta sẽ định nghĩa thêm route trong src > routes.js gọi là student/:id và cũng tạo thêm một component mới đặt tên là Student.vue trong thư mục src > components.

Import component trên vào trong routes.js và tạo route cho component này

Ở đoạn code trên, chúng ta truyền thêm vào một tham số gọi là id và đây sẽ là số id khác nhau đối với từng Student.

Bên trong Student component, chúng ta có thể lấy thông tin của id bằng cách sử dụng biến $route và truy cập bằng cách sử dụng $route.params.id. Cập nhập lại nội dung của Student.vue như sau:

Chúng ta đang sử dụng chế độ History. Truy cập đường dẫn sau trên trình duyệt: http://localhost:8080/student/4 và chúng ta có thể nhìn thấy ID của student. Chúng ta có thể sử dụng tham số ID để lấy nội dung của Student từ backend. Bạn có thể có nhiều phần động như bạn mong muốn dựa trên yêu cầu của bài toán.

Nên sau khi bạn gọi phương thức Vue.use() bên trong main.js, truyền router object, trong bất kỳ component nào của app bạn có quyền truy cập

  1. this.$router:  là router object.
  2. this.$route:  là route object hiện tại.

Router object

Chúng ta có thể truy cập router object sử dụng this.$router từ bất kỳ component nào khi vue router được cài đặt trong trong component root và nó cung cấp nhiều tính năng hay

Chúng ta có thể tạo một ứng dụng điều hướng đến route mới sử dụng

Nếu bạn sử dụng các hoạt động CRUD trước đây bằng vue như một frontend thì chúng ta đã từng sử dụng phương thức push() để thay đổi lập trình router.

Route được đặt tên

Để đơn giản hoá quá trình liên kết để điều hướng đến các route khác nhau bằng cách xác định các route được đặt tên hoặc các route được chỉ định

Đôi khi nó sẽ hữu ích hơn khi nhận định route bằng tên, đặc biệt khi liên kết đến route hoặc thực hiện điều hướng. Có thể đặt tên cho một route trong tuỳ chọn các route khi tạo một Router instace. Tiếp theo hãy thử thêm thuộc tính name cho object routes trong file routes.js

Chúng ta có thể thay đổi các link trong navbar trong file App.vue

Redirect trong Vue

Trong SPA, chúng ta thường gặp các trường hợp cần thực hiện chuyển hướng sau khi một vài hoạt động thực hiện thành công. Chúng ta có thể chuyển hướng bằng cách lập trình route sử dụng router object. Ví dụ khi đăng nhập thành công, chúng ta cần lập trình route chuyển về trang Home. Hãy cùng xem ví dụ sau

Chúng ta sẽ tạo một component mới tên là Redirect.vue bên trong thư mục components và thêm đoạn code sau đây

Khi trang web được mount, nó sẽ chuyển hướng trang web về Home component

Thêm component trên vào routes.js và đăng ký như sau:

Nào thử truy cập đường link: http://localhost:8080/redirect và sẽ thấy rằng trang web sẽ tự động chuyển hướng về Home component.

Điều hướng Router History sử dụng phương thức go

Đôi khi cần lập trình forward hoặc backward sử dụng điều hướng route. Ví dụ về  tạo trang 404 như sau.

Tạo một trang 404.vue bên trong thư mục components và thêm đoạn code sau

Ở đây, chúng ta tạo một trang 404 và sau đấy đặt một link để điều hướng quay về route trước đấy. Bên trong hàm, chúng ta sử dụng -1 nghĩa rằng trình duyệt sẽ quay lại một bước về trang trước đấy. Nếu để là 1 thì nó sẽ chuyển đến một trang trước đấy trên trình duyệt.

Tiếp theo, chúng ta sẽ import vào trang routes.js

Mở đường link: http://localhost:8080/404 và bạn có thể nhìn thấy link để quay trở về trang trước. Click vào link, trình duyệt sẽ chuyển về trang trước.

 

You May Also Like

About the Author: Nguyen Dinh Thuc

Leave a Reply

avatar
  Subscribe  
Notify of