LunarXYZuseQuery
提供 URL Query 参数解析方法。
Type Declarations
本系列方法用到的一些公共类型。
ts
/**
* Query 参数解析后的对象类型
*/
interface QueryInfo {
[key: string]: string
}
parseQuery
解析 URL 参数，返回一个 Query 参数对象，会把 URL 里的 key1=value1&key2=value2 信息转为对象。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function parseQuery(
/**
* 以 `http` / `https` 开头的网络地址
*/
url?: Url<string>
): QueryInfo
type Url<T extends string> = `http://${T}` | `https://${T}`
- Example:
ts
import { useQuery } from '@lunarxyz/core'
console.log(window.location.href)
// http://localhost:5173/?id=3&name=Petter&age=18
const { parseQuery } = useQuery()
// 浏览器端可以获取当前 URL 进行解析
const queryInfo = parseQuery()
console.log(queryInfo)
// {
// "id": "3",
// "name": "Petter",
// "age": "18"
// }
// 其他端只能像这样手动传入参数
const queryInfoByManual = parseQuery(
'http://localhost:5173/?id=4&name=Marry&age=16'
)
console.log(queryInfoByManual)
// {
// "id": "4",
// "name": "Marry",
// "age": "16"
// }
extractQueryInfo
提取参数信息，在 parseQuery 的基础上，进一步抽离请求路径和交互参数对象的对象，可用于唤起 App 或者 Wap 版的 URL 分析。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function extractQueryInfo(): {
/**
* App 内部唤起路径
*/
path: string
/**
* 剔除了 path 之外的其他参数
*/
params: QueryInfo
}
- Example:
ts
import { useQuery } from '@lunarxyz/core'
console.log(window.location.href)
// http://localhost:5173/?path=/pages/member/detail&id=3
const { extractQueryInfo } = useQuery()
const { path, params } = extractQueryInfo()
console.log({ path, params })
// {
// "path": "/pages/member/detail",
// "params": {
// "id": "3"
// }
// }
getQuery
获取指定的 Query 参数。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function getQuery(
/**
* 要获取的参数键名
*/
key: string,
/**
* 默认从浏览器 URL 提取，传入该参数可以从指定的 URL 解析
*/
url?: Url
): string
- Example:
ts
import { useQuery } from '@lunarxyz/core'
console.log(window.location.href)
// http://localhost:5173/?id=3&name=Petter&age=18
const { getQuery } = useQuery()
const id = getQuery('id')
console.log(id) // 3
const name = getQuery('name')
console.log(name) // Petter
stringifyQuery
序列化 Query 参数信息。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function stringifyQuery(
/**
* 要用于序列化的 Query 参数的对象
*/
queryInfoObject: QueryInfoObject
): string
type QueryInfoObject = Record<
string,
string | number | boolean | undefined | null
>
- Example:
ts
import { useQuery } from '@lunarxyz/core'
const { stringifyQuery } = useQuery()
const queryStringify = stringifyQuery({
id: 3,
name: 'Petter',
age: 18,
isBoy: true,
hobby: undefined,
girlFriend: null,
})
console.log(queryStringify)
// id=3&name=Petter&age=18&isBoy=true&hobby=undefined&girlFriend=null