路由Query
Zova 对路由Query
进行了强化,提供了 Typescript 类型化支持
创建页面组件
为了完整的演示如何定义和使用类型化的Query
,这里我们在模块a-demo
中创建一个新的页面组件user
:
bash
$ zova :create:page user --module=a-demo
定义Query
在controller.ts
中定义 Query:
src/suite/a-demo/modules/a-demo/src/page/user/controller.ts
typescript
export const QuerySchema = zz.object({
name: zz.string().optional(),
age: zz.number().optional(),
});
- Zova 对zod进行了封装,提供了增强版的
zz
对象 - 使用
zz
定义了一个object
,包含两个字段:name
和age
使用Query
在render.ts
中,可以直接获取 Query,并渲染出来
src/suite/a-demo/modules/a-demo/src/page/user/render.tsx
typescript
export class RenderUser {
render() {
return (
<div>
<div>
name: {this.$query.name}, {typeof this.$query.name}
</div>
<div>
age: {this.$query.age}, {typeof this.$query.age}
</div>
</div>
);
}
}
$query.name
的类型是string | undefined
$query.age
的类型是number | undefined
传入Query
接下来,我们需要在导航路由时传入Query
参数
直接在页面组件user
中添加一个按钮,响应单击事件,并采用不同的Query
参数导航至当前页面。这样,我们可以看到$query
是响应式的
typescript
export class RenderUser {
render() {
return (
<div>
<div>
name: {this.$query.name}, {typeof this.$query.name}
</div>
<div>
age: {this.$query.age}, {typeof this.$query.age}
</div>
<button
onClick={() => {
const age = (this.$query.age ?? 0) + 1;
const url = this.$router.resolvePath('/a/demo/user', { name: 'tom', age });
this.$router.push(url);
}}
>
Go To Current Page
</button>
</div>
);
}
}
$query
Zova 在controller
bean 的基类中注入了$query
对象,从而可以在 render 实例中通过this.$query
访问 Query 参数