{"id":16019500,"url":"https://github.com/fjc0k/umi-plugin-router-plus","last_synced_at":"2025-04-05T03:24:54.972Z","repository":{"id":57142389,"uuid":"245771017","full_name":"fjc0k/umi-plugin-router-plus","owner":"fjc0k","description":"一款 Umi 3 插件，为你带来类型友好的页面参数的定义、传递与获取。","archived":false,"fork":false,"pushed_at":"2021-09-05T16:38:36.000Z","size":773,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T09:07:18.734Z","etag":null,"topics":["umi","umi-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/umi-plugin-router-plus","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fjc0k.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-08T07:29:28.000Z","updated_at":"2023-10-09T07:29:23.000Z","dependencies_parsed_at":"2022-09-05T18:41:29.016Z","dependency_job_id":null,"html_url":"https://github.com/fjc0k/umi-plugin-router-plus","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fjc0k%2Fumi-plugin-router-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fjc0k%2Fumi-plugin-router-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fjc0k%2Fumi-plugin-router-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fjc0k%2Fumi-plugin-router-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fjc0k","download_url":"https://codeload.github.com/fjc0k/umi-plugin-router-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247283164,"owners_count":20913521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["umi","umi-plugin"],"created_at":"2024-10-08T17:04:36.333Z","updated_at":"2025-04-05T03:24:54.950Z","avatar_url":"https://github.com/fjc0k.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# umi-plugin-router-plus ![Node CI](https://github.com/fjc0k/umi-plugin-router-plus/workflows/Node%20CI/badge.svg) [![codecov](https://codecov.io/gh/fjc0k/umi-plugin-router-plus/branch/master/graph/badge.svg)](https://codecov.io/gh/fjc0k/umi-plugin-router-plus)\n\n一款 [Umi 3](https://github.com/umijs/umi) 插件，为你带来**类型友好**的**页面参数的定义、传递与获取**。\n\n---\n\n\u003c!-- TOC depthFrom:2 --\u003e\n\n- [安装](#安装)\n- [启用方式](#启用方式)\n- [使用介绍](#使用介绍)\n  - [定义页面参数](#定义页面参数)\n  - [获取页面参数](#获取页面参数)\n  - [传递页面参数](#传递页面参数)\n- [API 列表](#api-列表)\n  - [navigateTo(pageName, params)](#navigatetopagename-params)\n  - [redirectTo(pageName, params)](#redirecttopagename-params)\n  - [navigateBack(delta)](#navigatebackdelta)\n  - [navigateForward(delta)](#navigateforwarddelta)\n  - [usePageName()](#usepagename)\n  - [usePageParams(pageName)](#usepageparamspagename)\n  - [usePageQuery()](#usepagequery)\n  - [useQuery()](#usequery)\n- [页面名称](#页面名称)\n- [许可](#许可)\n\n\u003c!-- /TOC --\u003e\n\n## 安装\n\n```bash\n# npm\nnpm i umi-plugin-router-plus -D\n\n# or yarn\nyarn add umi-plugin-router-plus -D\n\n# or pnpm\npnpm add umi-plugin-router-plus -D\n```\n\n## 启用方式\n\n默认开启。\n\n## 使用介绍\n\n### 定义页面参数\n\n在页面文件内定义 `Params` 类型，并将之导出即可：\n\n```tsx\n// src/pages/test.tsx\n\nexport interface Params {\n  id: number\n  enabled?: boolean\n  gender: 'male' | 'female'\n  name: string\n  tags?: string[]\n}\n```\n\n### 获取页面参数\n\n在页面文件内定义好页面参数后，只需在页面组件内使用 `usePageParams` 即可获取：\n\n```tsx\n// src/pages/test.tsx\nimport React from 'react'\nimport { usePageParams } from 'umi'\n\nexport interface Params {\n  id: number\n  enabled?: boolean\n  gender: 'male' | 'female'\n  name: string\n  tags?: string[]\n}\n\nexport default function () {\n  const {\n    id,\n    enabled = false, // 指定默认值\n    gender,\n    name,\n    tags = [],\n  } = usePageParams('Test')\n\n  return \u003cdiv\u003eid is: {id}\u003c/div\u003e\n}\n```\n\n### 传递页面参数\n\n见下：[API 列表](#api-列表)。\n\n## API 列表\n\n### navigateTo(pageName, params)\n\n```ts\nimport { navigateTo } from 'umi'\n\nnavigateTo('Index')\nnavigateTo('User', { id: 2 })\n```\n\n保留当前页面，跳转至某个页面，和 `history.push` 效果一致。\n\n### redirectTo(pageName, params)\n\n```ts\nimport { redirectTo } from 'umi'\n\nredirectTo('Index')\nredirectTo('User', { id: 2 })\n```\n\n关闭当前页面，跳转至某个页面，和 `history.replace` 效果一致。\n\n### navigateBack(delta)\n\n```ts\nimport { navigateBack } from 'umi'\n\nnavigateBack()\nnavigateBack(2)\n```\n\n关闭当前页面，返回上一页面或多级页面，和 `history.goBack` 效果一致。\n\n### navigateForward(delta)\n\n```ts\nimport { navigateForward } from 'umi'\n\nnavigateForward()\nnavigateForward(2)\n```\n\n保留当前页面，前进到下一页面或多级页面，和 `history.goForward` 效果一致。\n\n### usePageName()\n\n```ts\nimport { usePageName } from 'umi'\n\nconst pageName = usePageName()\n```\n\n获取当前页面的名称。\n\n### usePageParams(pageName)\n\n```ts\nimport { usePageParams } from 'umi'\n\nconst { id } = usePageParams('User')\n```\n\n获取传给页面的参数，**会继承所有父 layout 页面定义的参数**。\n\n### usePageQuery()\n\n```ts\nimport { usePageQuery } from 'umi'\n\nconst { source } = usePageQuery\u003c{\n  source: string\n}\u003e()\n```\n\n获取传给页面的 query。\n\n### useQuery()\n\n同 `usePageQuery`，不再推荐使用，未来版本会被移除。\n\n## 页面名称\n\n页面名称会根据路由的 `path` 自动生成，如果程序没有提示你页面名称重复，大可不必深究。\n\n比如，页面路径 `/user/detail` 生成的页面名称为 `UserDetail`。\n\n## 许可\n\nJay Fong (c) MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffjc0k%2Fumi-plugin-router-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffjc0k%2Fumi-plugin-router-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffjc0k%2Fumi-plugin-router-plus/lists"}