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

Chào mừng đến với Cafedev! Trong bài viết này, chúng ta sẽ khám phá về Router Vuejs with Programmatic Navigation. Không chỉ sử dụng “ để tạo ra các thẻ mở rộng cho điều hướng tường minh, chúng ta cũng có thể làm điều này theo cách tự động bằng cách sử dụng các phương thức của router. Hãy cùng tìm hiểu cách thực hiện điều hướng theo chương trình và khám phá thêm về các tính năng và quy trình của chúng!

Điều Hướng Lập Trình


Ngoài việc sử dụng để tạo các thẻ mấu chốt cho điều hướng biểu diễn, chúng ta có thể thực hiện điều này theo cách lập trình bằng cách sử dụng các phương thức thể hiện của router.

1. Điều hướng đến vị trí khác

Chú ý: Các ví dụ dưới đây đề cập đến thể hiện router như là router. Trong một thành phần, bạn có thể truy cập router bằng cách sử dụng thuộc tính $router, ví dụ: this.$router.push(...). Nếu bạn đang sử dụng API Composition, router có thể truy cập bằng cách gọi useRouter().
Để điều hướng đến một URL khác, sử dụng router.push. Phương thức này đẩy một mục nhập mới vào ngăn xếp lịch sử, vì vậy khi người dùng nhấp vào nút quay lại trình duyệt, họ sẽ được chuyển đến URL trước đó.
Đây là phương thức được gọi nội bộ khi bạn nhấp vào một , vì vậy việc nhấp vào tương đương với việc gọi router.push(...).

| Biểu diễn | Lập trình |

| – | |
| | router.push(...) |
Đối số có thể là một đường dẫn chuỗi hoặc một đối tượng mô tả vị trí. Ví dụ:

// literal string path
router.push('/users/eduardo')

// object with path
router.push({ path: '/users/eduardo' })

// named route with params to let the router build the url
router.push({ name: 'user', params: { username: 'eduardo' } })

// with query, resulting in /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// with hash, resulting in /about#team
router.push({ path: '/about', hash: '#team' })

Chú ý: params sẽ bị bỏ qua nếu có một path được cung cấp, điều này không phải là trường hợp của query, như được thể hiện trong ví dụ ở trên. Thay vào đó, bạn cần cung cấp name của route hoặc chỉ định thủ công toàn bộ path với bất kỳ tham số nào:

const username = 'eduardo'
// we can manually build the url but we will have to handle the encoding ourselves
router.push(`/user/${username}`) // -> /user/eduardo
// same as
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// if possible use `name` and `params` to benefit from automatic URL encoding
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` cannot be used alongside `path`
router.push({ path: '/user', params: { username } }) // -> /user

Khi chỉ định params, hãy chắc chắn cung cấp một string hoặc number (hoặc một mảng của chúng cho params có thể lặp lại). Bất kỳ loại nào khác (như objects, booleans, v.v.) sẽ tự động được chuyển thành chuỗi. Đối với params tùy chọn, bạn có thể cung cấp một chuỗi rỗng ("") hoặc null làm giá trị để loại bỏ nó.
Vì prop to chấp nhận cùng loại đối tượng như router.push, nên cùng một quy tắc chính xác áp dụng cho cả hai.

router.push và tất cả các phương thức điều hướng khác trả về một Promise cho phép chúng ta chờ cho đến khi điều hướng hoàn thành và biết nó đã thành công hay thất bại. Chúng ta sẽ nói thêm về điều đó trong Xử lý Điều Hướng.

2. Thay thế vị trí hiện tại

Nó hoạt động giống như router.push, khác biệt duy nhất là nó điều hướng mà không đẩy một mục nhập lịch sử mới, như tên của nó đã gợi ý – nó thay thế mục nhập hiện tại.
| Biểu diễn | Lập trình |

| |
| | router.replace(...) |
Cũng có thể trực tiếp thêm một thuộc tính replace: true vào đối số to được chuyển cho router.push:

router.push({ path: '/home', replace: true })
// equivalent to
router.replace({ path: '/home' })

3. Duyệt qua lịch sử


Phương thức này nhận một số nguyên duy nhất làm tham số chỉ ra đi bao nhiêu bước để đi lên hoặc đi lại trong ngăn xếp lịch sử, tương tự như window.history.go(n).
Ví dụ

// go forward by one record, the same as router.forward()
router.go(1)

// go back by one record, the same as router.back()
router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records
router.go(-100)
router.go(100)

4. Thao tác Lịch sử

Bạn có thể đã nhận ra rằng router.push, router.replace và router.go là các đối tác của , và chúng mô phỏng các API window.history.
Do đó, nếu bạn đã quen với APIs Lịch sử Trình duyệt, việc thao tác lịch sử sẽ cảm thấy quen thuộc khi sử dụng Vue Router.

Đáng lưu ý rằng các phương thức điều hướng Vue Router (push, replace, go) hoạt động một cách nhất quán bất kể tùy chọn history được chuyển khi tạo ra instance router.

Trong bài viết này về Router Vuejs with Programmatic Navigation, chúng ta đã tìm hiểu cách thực hiện điều hướng chương trình bằng cách sử dụng các phương thức của router. Việc này mở ra nhiều cơ hội linh hoạt trong việc điều hướng và quản lý ứng dụng Vue của chúng ta. Hy vọng rằng bạn đã có được cái nhìn sâu sắc và hiểu biết về cách sử dụng điều hướng chương trình trong Vue Router. Hãy tiếp tục khám phá và ứng dụng những kiến thức này vào các dự án của mình trên 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