blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

docs: 优化文档

Browse Source
This commit is contained in:
winixt 2023-04-12 15:49:13 +08:00
parent f680a6a51c
commit 7aa44703a3
2 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/guide/route.md
View File

@ -126,7 +126,6 @@ Fes.js 里约定名称为 `[slug]`格式的文件或文件夹映射为动态路
- `src/pages/users/[id].vue` 会成为 `/users/:id` - `src/pages/users/[id].vue` 会成为 `/users/:id`
- `src/pages/users/[id]/settings.vue` 会成为 `/users/:id/settings` - `src/pages/users/[id]/settings.vue` 会成为 `/users/:id/settings`
:::warning :::warning
`@slug`形式下版本会弃用，请替换为`[slug]`~ `@slug`形式下版本会弃用，请替换为`[slug]`~
::: :::
@ -140,12 +139,10 @@ Fes.js 里约定名称为 `[...slug]`格式的文件或文件夹映射为动态
- `src/pages/users/[...id].vue` 会成为 `/users/:id(.*)` - `src/pages/users/[...id].vue` 会成为 `/users/:id(.*)`
- `src/pages/users/[...id]/settings.vue` 会成为 `/users/:id(.*)/settings` - `src/pages/users/[...id]/settings.vue` 会成为 `/users/:id(.*)/settings`
:::warning :::warning
`*`形式下版本会弃用，请替换为`[...slug]`~ `*`形式下版本会弃用，请替换为`[...slug]`~
::: :::
### 嵌套路由 ### 嵌套路由
Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout.vue` 为该目录的公共父组件，`layout.vue` 中必须实现 `RouterView` Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout.vue` 为该目录的公共父组件，`layout.vue` 中必须实现 `RouterView`
@ -263,7 +260,7 @@ defineRouteMeta({
``` ```
::: tip ::: tip
推荐使用`defineRouteMete`，有更好的提示。 推荐使用`defineRouteMeta`，有更好的提示。
::: :::
路由元信息在编译后会附加到路由配置中： 路由元信息在编译后会附加到路由配置中：

27
docs/reference/plugin/plugins/layout.md
View File

@ -57,7 +57,7 @@
可以为页面单独设置布局类型： 可以为页面单独设置布局类型：
```js ```js
import { defineRouteMete } from '@fesjs/fes'; import { defineRouteMeta } from '@fesjs/fes';
defineRouteMeta({ defineRouteMeta({
layout: { layout: {
@ -73,7 +73,7 @@ defineRouteMeta({
支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存： 支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存：
```js ```js
import { defineRouteMete } from '@fesjs/fes'; import { defineRouteMeta } from '@fesjs/fes';
defineRouteMeta({ defineRouteMeta({
'keep-alive': true, 'keep-alive': true,
@ -248,16 +248,16 @@ export const layout = (layoutConfig, { initialState }) => ({
``` ```
- **title**：菜单的标题。 - **title**：菜单的标题。
- 如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。 - 如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
- title支持配置函数，对应 Fes Design 中 Menu 组件的`label`插槽。仅在运行时配置中支持。 - title 支持配置函数，对应 Fes Design 中 Menu 组件的`label`插槽。仅在运行时配置中支持。
- **icon**: 菜单的图标，只一级标题展示图标。 - **icon**: 菜单的图标，只一级标题展示图标。
- 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。 - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
- 图标使用本地或者远程 svg 图片。 - 图标使用本地或者远程 svg 图片。
```js ```js
{ {
@ -357,13 +357,15 @@ export const layout = {
## API ## API
### useTabTitle ### useTabTitle
类型定义如下： 类型定义如下：
```ts ```ts
function useTabTitle(title: string | Ref<string>): void; function useTabTitle(title: string | Ref<string>): void;
``` ```
当使用多页签模式时，在页面中使用 `useTabTitle` 可以自定义页面标签： 当使用多页签模式时，在页面中使用 `useTabTitle` 可以自定义页面标签：
```vue ```vue
<script setup> <script setup>
import { useRoute, useTabTitle } from '@fesjs/fes'; import { useRoute, useTabTitle } from '@fesjs/fes';
@ -371,13 +373,10 @@ import { useRoute, useTabTitle } from '@fesjs/fes';
const titleRef = useTabTitle(`详情-${route.params?.id}`); const titleRef = useTabTitle(`详情-${route.params?.id}`);
//如果要更新 //如果要更新
titleRef.value = "changed" titleRef.value = 'changed';
</script> </script>
``` ```
## 4.x 升级到 5.x ## 4.x 升级到 5.x
1. 个性化 layout 配置改为使用传入 navigation 1. 个性化 layout 配置改为使用传入 navigation