路由Params

Zova 对路由Params进行了强化，提供了 Typescript 类型化支持

我们仍然使用页面组件user完整的演示如何定义和使用类型化的Params

定义Params

在controller.ts中定义 Params：

src/suite/a-demo/modules/a-demo/src/page/user/controller.ts

export const ParamsSchema = zz.object({
  id: zz.number().optional().default(0),
});

• 使用zz定义了一个object，包含字段：id

路由name

为了支持 Params，需要在路由记录上使用name字段，并且登记在模块的资源中

1. 路由记录

src/suite/a-demo/modules/a-demo/src/routes.ts

export const routes: IModuleRoute[] = [
  { path: 'card/header2', component: CardHeader2 },
  { name: 'user', path: 'user/:id?', component: User },
];

• name 设为user，系统自动添加模块前缀，生成绝对名称a-demo:user
• path 改为user/:id?

2. 资源记录

src/suite/a-demo/modules/a-demo/src/resource/pages.ts

import { TypePageParamsQuery } from 'zova';
import * as NSControllerPageUser from '../page/user/controller.js';

declare module 'zova' {
  export interface IPageNameRecord {
    'a-demo:user': TypePageParamsQuery<NSControllerPageUser.QueryInput, NSControllerPageUser.ParamsInput>;
  }
}

export const pageNameSchemas = {
  'a-demo:user': {
    params: NSControllerPageUser.ParamsSchema,
    query: NSControllerPageUser.QuerySchema,
  },
};

• 向IPageNameRecord接口添加记录，声明a-demo:user对应的Params类型
• 向pageNameSchemas对象添加记录，声明a-demo:user对应的ParamsSchema

使用Params

在render.ts中，可以直接获取 Params，并渲染出来

src/suite/a-demo/modules/a-demo/src/page/user/render.tsx

export class RenderUser {
  render() {
    return (
      <div>
        <div>id: {this.$params.id}</div>
      </div>
    );
  }
}

• $params.id的类型是number

传入Params

接下来，我们需要在导航路由时传入Params参数

仍然响应页面组件user中的按钮单击事件，并采用不同的Params参数导航至当前页面。这样，我们可以看到$params是响应式的

export class RenderUser {
  render() {
    return (
      <div>
        <div>id: {this.$params.id}</div>
        <button
          onClick={() => {
            const id = this.$params.id + 1;
            const url = this.$router.resolveName('a-demo:user', { params: { id } });
            this.$router.push(url);
          }}
        >
          Go To Current Page
        </button>
      </div>
    );
  }
}

$params

Zova 在controller bean 的基类中注入了$params对象，从而可以在 render 实例中通过this.$params访问 Params 参数

动图演示