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

  // nhận thông qua props của Page component được khai báo
  export default ({ zmproute }) => {
    useEffect(() => {
      console.log(zmproute.url);
    }, []);
  
    // ...
    return <Page></Page>;
  };

• Thông qua zmp instance:

  import { zmp } from "zmp-framework/react";
  // thông qua zmp instance
  export default () => {
    useEffect(() => {
      // ví dụ main view
      const zmproute = zmp.views.main.router.currentRoute;
      console.log(zmproute);
    }, []);
  
    // ...
    return <Page></Page>;
  };

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

  // nhận thông qua props của Page component được khai báo
  export default ({ zmprouter }) => {
    const doSomethingWithRouter = () => {
      // thao tác với router thông qua zmprouter
    };
  
    // ..
    return <Page></Page>;
  };

• Thông qua zmp instance:

  import { zmp } from "zmp-framework/react";
  // thông qua zmp instance
  export default () => {
    const doSomethingWithRouter = () => {
      // ví dụ main view
      const zmprouter = zmp.views.main.router;
      // thao tác với router thông qua zmprouter
    };
  
    // ...
    return <Page></Page>;
  };

Methods

methods	Mô 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