f81ac5651a
1. Add eslint plugin spellcheck to check word spell 2. Fix word spell Change-Id: I73d39cf797ef5bdf993b0154816134a1e93f2ed4
73 lines
3.1 KiB
Markdown
73 lines
3.1 KiB
Markdown
English | [简体中文](../../zh/develop/3-13-Route-introduction.md)
|
|
|
|
# Usage
|
|
|
|
- Pages that need to display independently should configure route
|
|
- According to the needs of the product, the page under submenu needs to display in page, for example `compute - instance`.
|
|
- Resource list page
|
|
- For example, instance list page.
|
|
- Note that the relevant resource listings under the details page does not need to be configured
|
|
- Resource detail page
|
|
- For example, instance detail page.
|
|
- Form that need whole page to show
|
|
- For example, create instance page.
|
|
- Some menus have only first-level page, such as `Home`, you also need to configure routing
|
|
|
|
# How to use
|
|
|
|
## The submenu corresponds to the route
|
|
|
|
- According to the requirements in the [catalog introduction](2-catalog-introduction.md), each first-level menu page has a separate folder under `pages`, the `containers` folder in it is used to place the submenu page code, `routes` folder is used to configure the route.
|
|
- Configuration is in `pages/xxxx/routes/index.js`
|
|
- The route configuration needs to follow a fixed format, see `src/pages/compute/routes/index.js`
|
|
- List
|
|
- Each child in the list, should follow:
|
|
- `path`, first-level menu corresponding name, for example nova compute use `compute`.
|
|
- `component`, layout components
|
|
- Pages about `auth`, for example `login`, use `src/layouts/User/index.jsx`
|
|
- Pages show after login, for example `instance`, use `src/layouts/Base/index.jsx`
|
|
- The layout automatically handles the display of the `menu item`, the right side of the content `header`, `breadcrumb`, etc.
|
|
- `routes`, The main content of the configuration is an array.
|
|
- Take compute route as an example `src/pages/compute/routes/index.js` :
|
|
|
|
```javascript
|
|
{ path: `${PATH}/instance`, component: Instance, exact: true },
|
|
```
|
|
|
|
- `path`, Path corresponding to each full page, for example `compute/instance`
|
|
- `component`, the component corresponding to page, such as component under `containers`
|
|
|
|
- For resource-type pages, generally configured
|
|
- List page, details page, complex create page in console platform (simple creation generally uses modal)
|
|
- List page, detail page in management platform (with `-admin`/`_admin` in path)
|
|
- For detail page, we recommend using `id`
|
|
- Take instance as an example `src/pages/compute/routes/index.js`
|
|
|
|
```javascript
|
|
{ path: `${PATH}/instance`, component: Instance, exact: true },
|
|
{ path: `${PATH}/instance-admin`, component: Instance, exact: true },
|
|
{
|
|
path: `${PATH}/instance/detail/:id`,
|
|
component: InstanceDetail,
|
|
exact: true,
|
|
},
|
|
{
|
|
path: `${PATH}/instance-admin/detail/:id`,
|
|
component: InstanceDetail,
|
|
exact: true,
|
|
},
|
|
{ path: `${PATH}/instance/create`, component: StepCreate, exact: true },
|
|
```
|
|
|
|
## The route corresponding to the first-level menu
|
|
|
|
- First-level menu should add in `src/core/routes.js`
|
|
- Take compute as an example
|
|
|
|
```javascript
|
|
{
|
|
path: '/compute',
|
|
component: Compute,
|
|
},
|
|
```
|