Chuyển tới nội dung chính

Router

ZMP framework cung cấp route và router instance giúp dễ dàng thực hiện các hoạt động định tuyến

Current route​

Lấy current route​

Đại diện cho route đang được kích hoạt, để truy xuất current route có 2 cách:

  • Thông qua props của Page components (các components trong folder /pages và có khai báo trong app-config.json, kể cả index.vue)

    Code demo fallback when rendering server side!

  • Thông qua zmp instance (dùng được với mọi components):

    import { zmp } from "zmp-vue";

    console.log(zmp.views.main.router.currentRoute);

Properties​

Route instance chứa các properties sau:

  • url: route URL

  • path: route path

  • query: object chứa route query params. Ví dụ /page/?id=5&foo=bar

    console.log(zmproute.query);
    //{id: '5', foo: 'bar'}
  • name: tên của route
  • hash: route URL hash
  • route: route object thể hiện cấu hình của route hiện tại

Router instance​

Lấy router instance​

Router instance đại diện cho app router, để truy xuất router instance có 2 cách:

  • Thông qua props của Page components

    Code demo fallback when rendering server side!

  • Thông qua zmp instance:

    import { zmp } from "zmp-vue";

    zmp.views.main.router.navigate("/settings", { transition: "zmp-flip" });

Methods​

methodsMô tả
.navigate(url, options)Chuyển đến trang mới:
  • url: string path của trang cần tới
  • options: object
    • reloadCurrent (boolean): Tải lại trang hiện tại
    • reloadPrevious (boolean): Tải lại trang trước đó
    • reloadAll (boolean): Tải lại trang, xoá các trang trước khỏi history và DOM
    • clearPreviousHistory (boolean): Xoá lịch sử các trang trước sau khi tải trang
    • animate (boolean): Bật/tắt hiệu ứng chuyển trang
    • history (boolean): Bật/tắt lịch sử router
    • browserHistory (boolean): Bật/tắt sử dụng lịch sử browser
    • ignoreCache (boolean): Bật/tắt cache
    • props (object): Truyền props tới trang sẽ chuyển tới
    • transition (string): Tên hiệu ứng chuyển trang (zmp-circle | zmp-cover | zmp-cover-v | zmp-dive | zmp-fade | zmp-flip | zmp-parallax | zmp-push)
.navigate(parameters, options)Chuyển đến trang mới:
  • parameters: object
    • path (string): path của trang cần tới
    • query (object): query params
  • options: object tương tự như phía trên
.back(url, options)Trở lại trang trước, trở lại trang cụ thể trong lịch sử của View:
  • url: string url cần chuyển tới
    • Nếu không chỉ định sẽ trở về trang trước trong lịch sử
    • Nếu được chỉ định và có trang trước trong lịch sử url sẽ bị bỏ qua
    • Nếu được chỉ định và có options force : true sẽ xoá trang trước trong lịch sử và chuyển tới trang
    • options: object
    • animate (boolean): Bật/tắt hiệu ứng chuyển trang
    • browserHistory (boolean): Bật/tắt sử dụng lịch sử browser
    • ignoreCache (boolean): Bật/tắt cache
    • force (boolean): nếu được đặt thành true bỏ qua trang trước đó trong lịch sử và tải trang chỉ định
.refreshPage()Tải lại trang hiện tại
.clearPreviousHistory()Xoá các trang trước trong lịch sử và xoá các trang trước đó khỏi DOM
.updateCurrentUrl(url)Thay đổi url và các thông số ( query,..) của zmprouter.currentRoute thông qua url mà không tải lại trang
.generateUrl({path, query})tạo url từ. Ví dụ zmprouter.generateUrl({path: '/specific-path/', query: { id: 2}}) tạo thành /specific-path/?id=2
.on(event, handler)Thêm event handler. Các event (routeChange, routeChanged, routeUrlUpdate)
.once(event, handler)Thêm event handler và sẽ bị xoá sau khi event fired
.off(event, handler)Xoá event handler
.off(event)Xoá tất cả event handler của một event cụ thể
.emit(event, ...args)fire event

Router

zi-chevron-up