From e224fbb2913a3832e9c38e107c6d24a4ccf27e43 Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Thu, 6 Aug 2020 14:21:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/frontend/router.md | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/docs/frontend/router.md b/docs/frontend/router.md index edd9aae..eddc3be 100644 --- a/docs/frontend/router.md +++ b/docs/frontend/router.md @@ -14,17 +14,19 @@ ### Route.meta Attributes： -| 参数 | 说明 | 类型 | 默认 | -| :----------: | :----------------------------------------------: | :--------: | :---------------------: | -| title | 路由在侧边栏、面包屑、页签、搜索结果中的显示名称 | `string` | - | -| dynamicTitle | 路由在面包屑、页签中的动态名称，参数为(to,from) | `function` | - | -| icon | 图标名，支持svg-icon、el-icon | `string` | - | -| affix | 是否在多页签中固定显示 | `boolean` | - | -| noCache | true时缓存页面 | `boolean` | - | -| activeMenu | 侧边栏当前激活菜单的index | `string` | - | -| noAuth | true时路由不需要鉴权 | `boolean` | router/constant下为true | -| iframe | 需要打开的iframe的地址 | `string` | - | -| isDetailPage | 是否是详情页 | `boolean` | - | +| 参数 | 说明 | 类型 | 默认 | +| :------------: | :----------------------------------------------: | :--------: | :---------------------: | +| title | 路由在侧边栏、面包屑、页签、搜索结果中的显示名称 | `string` | - | +| dynamicTitle | 路由在面包屑、页签中的动态名称，参数为(to,from) | `function` | - | +| icon | 图标名，支持svg-icon、el-icon | `string` | - | +| affix | 是否在多页签中固定显示 | `boolean` | - | +| noCache | true时缓存页面 | `boolean` | - | +| activeMenu | 侧边栏当前激活菜单的index | `string` | - | +| noAuth | true时路由不需要鉴权 | `boolean` | router/constant下为true | +| iframe | 需要打开的iframe的地址 | `string` | - | +| usePathKey | 是否使用$route.path作为组件缓存的key | `boolean` | - | +| useFullPathKey | 是否使用$route.fullPath作为组件缓存的key | `boolean` | - | +| commonModule | 共用组件的唯一标识 | `any` | - | ::: tip 注意 路由meta上的affix、noAuth、noCache会被子路由继承，优先使用子路由的值 @@ -34,7 +36,7 @@ 先总结一下路由页面被缓存的条件： - 启用了多页签 -- `(route.name || route.meta.isDetailPage) && route.meta.noCache && !route.meta.iframe` +- `(route.name || route.meta.usePathKey || route.meta.useFullPathKey) && !route.meta.noCache && !route.meta.iframe` 通常情况路由想做缓存都是通过 ``，但是如果是像 `/edit/1`、`/edit/2` 这样的共用路由页面的详情页的话， `` 就满足不了需求，因为它是通过组件的 `name` 来区分组件的。 @@ -50,10 +52,10 @@ const routes = [ ] ``` 先访问 `/foo`，然后将输入框的值改为100，再访问 `/bar` ，会发现输入框的值还是100。 -所以在 `router.beforeEach` 中做了判断，如果跳转前后的路由的 `meta.isDetailPage` 均为 `true` 的话，那么借助 `/redirect` 跳转一次，从而避免组件复用的问题 +所以在 `router.beforeEach` 中做了判断，如果跳转前后的路由的 `meta.commonModule` 相同的话，那么借助 `/redirect` 跳转一次，从而避免组件复用的问题 ::: warning 注意 -如果不使用meta.isDetailPage的话，需要缓存的页面的 `name` 必须和路由的 `name` 一致 +如果使用 `name`，需要缓存的页面的 `name` 必须和路由的 `name` 一致 ::: ## 路由白名单