Closed zhuddan closed 1 month ago
The changes enhance the routing functionality of the useRouter
module by introducing new interfaces for handling query parameters in navigation options. New functions, handleQuery
and setQuery
, are added to manage these properties, allowing for improved URL construction. Tests are implemented to validate these functionalities, and the documentation is updated to reflect the new features.
Files | Change Summary |
---|---|
src/useRouter/index.ts |
Introduced NavigateToOptions and RedirectToOptions interfaces with an optional query property; updated navigation functions accordingly. |
src/useRouter/readme.md |
Enhanced routing examples to illustrate query handling; added reactive data handling with computed for dynamic data fetching. |
src/utils.test.ts |
Newly created tests for the setQuery function to validate query string construction based on various parameter scenarios. |
src/utils.ts |
Introduced a new setQuery function for constructing URLs with query parameters, including handling of empty and falsy values. |
sequenceDiagram
participant User
participant Router
participant Utils
User->>Router: navigateTo({ query: { bar: 'bar' } })
Router->>Utils: setQuery(baseUrl, query)
Utils->>Utils: Construct query string
Utils-->>Router: Return updated URL
Router-->>User: Navigate to updated URL
🐰 In the meadow, hop and play,
With new routes, we find our way!
Parameters dance, URLs gleam,
A rabbit's joy, a coder's dream!
Let's explore, so much to see,
With every hop, we're wild and free! 🐇✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
暂无此应用场景,不过既然 query 最终还是得拼接到 url 上,那么就没有必要额外多加一个 query 选项,而是让用户自己去拼接URL。 仅需要监听 onload 的query参数即可,如你的下面这段。
const currentQuery = ref<Record<string, any>>({});
tryOnLoad((options) => {
currentQuery.value = options ?? {};
});
移除 query 参数后,关于你的 setQuery 函数,由于此库是 uni-use
,不宜加入此处。建议可自用、另发包、或写入readme。
此函数建议可以改进成这样:
/**
* 封装带有查询参数的 URL
* @param baseUrl - 基础 URL
* @param query - 要附加到 URL 的查询参数对象
* @returns 返回附加了查询参数的完整 URL
*/
export function buildUrl(baseUrl: string, query: Record<string, any>): string {
if (!Object.keys(query).length) {
return baseUrl;
}
const pieces: string[] = [];
for (const key in query) {
if (query[key] === undefined || query[key] === null || query[key] === '') {
// 用户传入了 key,理应附加此 key,而非移除
pieces.push(`${key}=`);
} else {
pieces.push(`${key}=${encodeURIComponent(query[key])}`);
}
}
// 使用数组 join 方法,而不是使用字符串拼接,以提高性能
const parameters = pieces.join('&');
if (!parameters.length) {
return baseUrl;
}
return baseUrl.includes('?') // 可不用正则解决的需求尽量不要用正则。
? `${baseUrl}&${parameters}`
: `${baseUrl}?${parameters}`;
}
暂无此应用场景,不过既然 query 最终还是得拼接到 url 上,那么就没有必要额外多加一个 query 选项,而是让用户自己去拼接URL。 仅需要监听 onload 的query参数即可,如你的下面这段。
感谢您仔细审阅并提供反馈。我理解现有应用场景下,直接让用户拼接 URL 确实更为简洁高效,而不需要额外增加 query 选项。我会遵循您的建议,仅在 onload 时监听 query 参数。既然如此,我会关闭这个PR。非常感谢您的指导,今后我会更加注意确保方案与仓库的目标一致。
描述
这个 PR 新增了 vue router 的 query 参数模式。
额外上下文
我明白这个模式不符合
uni-app
的默认跳转方式,但我习惯了 Vue 原生路由的参数传递方式,因此非常需要这个功能。它支持在路由跳转时携带参数,并在页面中获取这些参数。以下是一个使用示例:尽管这个模式与
uni-app
的跳转机制有所冲突,但它极大地提高了我的开发效率。关于测试,由于单元测试不支持getCurrentPages
,目前尚未找到合适的解决方案,因此我只测试了utils
中新增的函数。文档部分已根据新功能进行了相应修改。请仔细审查这个 PR 的变更内容,如果可以,希望能够合并,因为这个功能对我的项目非常重要。
Summary by CodeRabbit
New Features
Bug Fixes
Tests
Documentation