waft框架提供了多页路由的api。
- 在目录里新建多个页面,并在app.json中配置
- 在app.json中配置页面,和默认启动页
push
跳转路由界面
const query = new JSONObject();
query.set("id", 123);
// query可以省略 或用 null 或 new JSONObject()
history.pushState({url : 'pages/detail/detail', query: query });
replace
替换当前页面,换为路由界面
// query可以省略 或用 null 或 new JSONObject()
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"
}
...
}
}
}