45 lines
1.0 KiB
Markdown
45 lines
1.0 KiB
Markdown
|
---
|
|||
|
|
name: jjb-search-persistence
|
|||
|
|
description: 定义 JJB 项目搜索状态持久化规范。在使用 tools.router.query、router.query 管理搜索表单值或 URL 持久化时使用。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 搜索区规范（一级页面）
|
|||
|
|
|
|||
|
|
## 搜索状态持久化
|
|||
|
|
|
|||
|
|
- **状态管理**：`SearchForm` 的表单值必须通过 `@cqsjjb/jjb-common-lib/tools` 中的 `router.query` 进行管理
|
|||
|
|
|
|||
|
|
- **导入方式**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { tools } from '@cqsjjb/jjb-common-lib';
|
|||
|
|
const { router } = tools;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **访问查询参数**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// router.query 返回 Proxy 对象
|
|||
|
|
const id = router.query.id; // string 类型
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **设置查询参数**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
router.query = { id: '123' };
|
|||
|
|
router.query.id = '123';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **移除查询参数**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
router.query.id = undefined;
|
|||
|
|
router.query = { id: undefined };
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **持久化机制**：
|
|||
|
|
|
|||
|
|
- 查询参数自动写入地址栏 URL
|
|||
|
|
|
|||
|
|
- 页面返回时自动从 `router.query` 读取并回填表单值
|