|
| 1 | +// 缓存 |
| 2 | +const cacheMap = new Map() |
| 3 | + |
| 4 | +/** |
| 5 | + * 根据路由名称、query和params参数 转成组件名称 |
| 6 | + * @param {*} name 路由名称 |
| 7 | + * @param {*} query 路由query参数 |
| 8 | + * @param {*} params 路由params参数 |
| 9 | + */ |
| 10 | +const routeToComponentName = (name, query, params) => { |
| 11 | + let result = name |
| 12 | + for (const key in query) { |
| 13 | + result += `&${ key }=${ query[key] }` |
| 14 | + } |
| 15 | + for (const key in params) { |
| 16 | + result += `&${ key }=${ params[key] }` |
| 17 | + } |
| 18 | + return result |
| 19 | +} |
| 20 | +/** |
| 21 | + * 根据标签页的value 转成JSON对象 |
| 22 | + * @param {*} value tab value 值 |
| 23 | + */ |
| 24 | +const tabValueToJson = (value) => { |
| 25 | + const values = value.split('&') |
| 26 | + const name = values[0] |
| 27 | + const query = JSON.parse(values[2]) |
| 28 | + const params = JSON.parse(values[3]) |
| 29 | + return { name, query, params } |
| 30 | +} |
| 31 | +/** |
| 32 | + * 根据标签页的value 转成组件名称 |
| 33 | + * @param {*} value tab value 值 |
| 34 | + */ |
| 35 | +const tabValueToComponentName = (value) => { |
| 36 | + const { name, query, params } = tabValueToJson(value) |
| 37 | + return routeToComponentName(name, query, params) |
| 38 | +} |
| 39 | + |
| 40 | +/** |
| 41 | + * 组件缓存处理 |
| 42 | + * @param {*} component 组件 |
| 43 | + */ |
| 44 | +export const cacheHandle = (component, route) => { |
| 45 | + const { name, query, params, meta: { multiple } } = route |
| 46 | + if (multiple) { |
| 47 | + const key = routeToComponentName(name, query, params) |
| 48 | + let cache |
| 49 | + if (cacheMap.has(key)) { |
| 50 | + cache = cacheMap.get(key) |
| 51 | + } else { |
| 52 | + cache = { |
| 53 | + name: key, |
| 54 | + render: () => h(component) |
| 55 | + } |
| 56 | + cacheMap.set(key, cache) |
| 57 | + } |
| 58 | + return cache |
| 59 | + } |
| 60 | + return component |
| 61 | +} |
| 62 | + |
| 63 | +/** |
| 64 | + * 递归查询需要缓存的组件名称 |
| 65 | + * @param {*} menus 可以缓存的菜单列表 |
| 66 | + */ |
| 67 | +export const findKeepaliveName = (tabs, menus) => { |
| 68 | + const list = [] |
| 69 | + for (let i = 0; i < menus.length; i++) { |
| 70 | + const { id, componentName, multiple, children } = menus[i] |
| 71 | + for (let j = 0; j < tabs.length; j++) { |
| 72 | + const { menuId, value } = tabs[j] |
| 73 | + if (menuId === id) { |
| 74 | + let name = componentName |
| 75 | + if (multiple) { |
| 76 | + name = tabValueToComponentName(value) |
| 77 | + } |
| 78 | + list.push(name) |
| 79 | + } |
| 80 | + } |
| 81 | + if (children && children.length) { |
| 82 | + const arr = findKeepaliveName(children) |
| 83 | + if (arr.length) { |
| 84 | + componentName && list.push(componentName) |
| 85 | + list.push(...arr) |
| 86 | + } |
| 87 | + } |
| 88 | + } |
| 89 | + return list |
| 90 | +} |
0 commit comments