waft框架提供了多页路由的api。

  1. 在目录里新建多个页面,并在app.json中配置

image.png

  1. 在app.json中配置页面,和默认启动页

image.png

3.在页面中使用history API跳转

push

跳转路由界面

  1. const query = new JSONObject();
  2. query.set("id", 123);
  3. // query可以省略 或用 null 或 new JSONObject()
  4. history.pushState({url : 'pages/detail/detail', query: query });

replace

替换当前页面,换为路由界面

  1. // query可以省略 或用 null 或 new JSONObject()
  2. history.replaceState({url : 'pages/detail/detail', query: JSON.parseObject(`{"id":"123456"}`)});

goBack

返回上一页

history.goBack();

go(N)

返回前N页

history.go(-2);

设置最大路由栈

可以控制最大的路由栈,超过max上线时,push时会以队列方式,顶掉前面的页面。

import { getApp } from 'waft';

getApp().router.max = 3;


回复逻辑下发路由配置

某些场景下需要服务端下发时提前指定页面的 path 和 query,需要结合前面的 Render 指令,添加相关字段:

{
    "commandDomain": "AliGenie.Screen",
    "commandName": "Render",
    "payload": {
          "pageType": "TPL.RenderDocument",  // 表示该渲染指令为模板渲染模式
          "data": {
                "pageTitle": "TPL2.0屏显示例",   // 真机渲染时显示在顶部导航栏的标题
                'template': "tpl_code",  // 模板的唯一标识
                "dataSource": {  // 渲染模板所需的数据
                "imageUrl": "https://img.alicdn.com/tfs/TB1FHUFLqL7gK0jSZFBXXXZZpXa-720-405.jpg",
                "title": "模板标题",
                "detail": "模板描述"
            },
              "path": "pages/index/index",    // 不指定时默认加载 index 路由
              "query": {
                    "key1": "value1",
                    "key2": "value2"
              }
              ...
          }
    }
}