Introduction to the

Medusa-router encapsulates the official interface so that you can read and use routes in a more elegant manner. It is easier to remember than the official interface and the route parameters retain their original data types. Medusa-router is designed as an SDK that can be used in various mini programs. It has been tested on wechat, Baidu, Alipay, Taro and UNI-App.

Quick learning

The installation

In projects that support the NPM package management tool, you can download the medusa-router with the following command. If your project does not support it, please go to medusa-router to copy the files in the dist folder to your project.

$ npm install @medusa/medusa-router
Copy the code

use

Medusa-router is designed to be a singleton, assuming you don’t need to worry about creating multiple instances when initializing in multiple files. For ease of use we can assign the instantiation object to the properties of the app instance.

/** * /app.js */
import Router from './utils/router';

App({
  ms: new Router(wx),
});
Copy the code
/** * /pages/index/index.js or 
const app = getApp();

Page({
   onLoad() {
      const { fullPath, query } = app.ms.$route;
      console.log(fullPath, query); // '/pages/index/index' { id: 1 }
   },
   onClick() {
      app.ms.push({
         url: '/pages/logs/logs'.query: {
            num: 0.// number
            bool: true.// boolean
         },
         success: () = > {
      	   console.log('success'); }}); }});Copy the code

$route objects

The Ms. $Route object contains information about the current page, including information about the topmost page in the page stack retrieved by the getCurrentPages() API and the extended properties fullPath and Query.

  • {String} fullPath– Full page path, no parameters
  • {Object} query– Route parameter, in which the attributes retain the original data type

API specification

getPage()

  • Note: To obtain the current page information, it is equivalent to usinggetCurrentPages()The API gets the topmost page in the page stack;

push(options)

  • parameter
    • {Object} options
    • {String} options.url– Destination page path
    • {Object} [options.query]– Route parameters
    • {Object} [options.events]– Page communication interface
    • {Function} [options.success]– Callback function on success
    • {Function} [options.fail]– Callback function on failure
    • {Function} [options.complete]– End callback function
  • Description:
    • Jump to target page, with appletnavigateTo(...)Apis have the same functionality;

replace(options)

  • parameter
    • {Object} options
    • {String} options.url– Destination page path
    • {Object} [options.query]– Route parameters
    • {Boolean} [options.closeAll = false]– Controls whether to close all pages existing in the current routing stack
    • {Function} [options.success]– Callback function on success
    • {Function} [options.fail]– Callback function on failure
    • {Function} [options.complete]– End callback function
  • Description:
    • Jump to the target page and close the current page, with the appletredirectTo(...)Apis have the same functionality;
    • whenoptions.closeAllParameters fortrue, will jump to the target page and close all pages in the routing stack, equivalent to the small programreLaunch(...)API functionality;

switchTab(options)

  • parameter
    • {Object} options
    • {String} options.url– tabBar Indicates the page path
    • {Function} [options.success]– Callback function on success
    • {Function} [options.fail]– Callback function on failure
    • {Function} [options.complete]– End callback function
  • Description:
    • Jump to target page, with appletnavigateTo(...)Apis have the same functionality;

goBack(options)

  • parameter
    • {Object} [options]
    • {String} options.delta = 1– Returns several layers of pages, default is 1
    • {Function} [options.success]– Callback function on success
    • {Function} [options.fail]– Callback function on failure
    • {Function} [options.complete]– End callback function
  • Description:
    • Page back function, with appletsnavigateBack(...)The API has the same functionality. The arguments to this function are optional and return to the upper page by default if no arguments are passed.

goHome()

  • Return to the home page function, empty the routing stack;

decoding(options)

  • parameter
    • {Object} options– Options of the onLoad life cycle function
  • The return value
    • {Object} query– Route parameter object
  • Instructions: Usemedusa-routerFor the routing function, route parameters have the fidelity function and need to be useddecoding(options)Parameters obtained by analysis;

Enhanced Functions

Route parameter fidelity function

  • medusa-routerAll the hop functions provided by in support of the native parameter transmission mode. The route parameter values obtained in this mode are all strings.
  • usepush 和 replaceFunction, usequeryAttribute pass parameters canKeep the original data type. Used in the target page$route.queryObject or calldecoding(options)API to get the correct route parameters;

Simplified API parameter transfer

  • An API with a jump function can pass the target page path string as a parameter if it does not need to pass routing parameters and callback functions.
  • goBack(options)If you do not need to use the callback function, you can directly change the rollback functionRoll back the page hierarchyAs a parameter;
/* Jump function */
ms.push('/pages/logs/logs');

/* Rollback function */
ms.goBack(2);
Copy the code