github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-02-03 10:28:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(keep-alive): fix the problem that the multi-level routing cache page is rendered multiple times #123

Browse Source
This commit is contained in:
vben 2020-12-11 21:42:25 +08:00
parent c911af4aca
commit 0daca28362
4 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -22,7 +22,7 @@
}, },
"dependencies": { "dependencies": {
"@iconify/iconify": "^2.0.0-rc.2", "@iconify/iconify": "^2.0.0-rc.2",
"@vueuse/core": "^4.0.0-rc.7", "@vueuse/core": "^4.0.0-rc.8",
"ant-design-vue": "^2.0.0-rc.4", "ant-design-vue": "^2.0.0-rc.4",
"apexcharts": "^3.22.3", "apexcharts": "^3.22.3",
"axios": "^0.21.0", "axios": "^0.21.0",

1
src/layouts/page/ParentView.vue
View File

@ -23,6 +23,7 @@
import { useCache } from './useCache'; import { useCache } from './useCache';
export default defineComponent({ export default defineComponent({
parentView: true,
setup() { setup() {
const { getCaches } = useCache(false); const { getCaches } = useCache(false);

8
src/layouts/page/index.tsx
View File

@ -12,7 +12,7 @@ import { useCache } from './useCache';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
interface DefaultContext { interface DefaultContext {
Component: FunctionalComponent; Component: FunctionalComponent & { type: { [key: string]: any } };
route: RouteLocation; route: RouteLocation;
} }
@ -42,7 +42,11 @@ export default defineComponent({
? 'fade-slide' ? 'fade-slide'
: null; : null;
const renderComp = () => <Component key={route.fullPath} />; // When the child element is the parentView, adding the key will cause the component to be executed multiple times. When it is not parentView, you need to add a key, because it needs to be compatible with the same route carrying different parameters
const isParentView = Component?.type.parentView;
const componentKey = isParentView ? {} : { key: route.fullPath };
const renderComp = () => <Component {...componentKey} />;
const PageContent = unref(openCache) ? ( const PageContent = unref(openCache) ? (
<KeepAlive include={cacheTabs}>{renderComp()}</KeepAlive> <KeepAlive include={cacheTabs}>{renderComp()}</KeepAlive>

18
yarn.lock
View File

@ -1757,18 +1757,18 @@
vscode-languageserver-textdocument "^1.0.1" vscode-languageserver-textdocument "^1.0.1"
vscode-uri "^2.1.2" vscode-uri "^2.1.2"
"@vueuse/core@^4.0.0-rc.7": "@vueuse/core@^4.0.0-rc.8":
version "4.0.0-rc.7" version "4.0.0-rc.8"
resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.0.0-rc.7.tgz#beb2378d97ca03bc65ad05df048df95b1fbf41b0" resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.0.0-rc.8.tgz#d4d1521d8bf1f5a5c45cac4cb81812c9f1d91d1e"
integrity sha512-a45qj5TfihUJ5Q7BGHPjl7J5ugoikEoWCisiHXo2tCiSKoCVIu9GD/p0+ldYeDNyIAQZQuEO2Kn9weP8kw3LiQ== integrity sha512-xQGBl9tUMnk0QpqQzdf/awMUW3sQPD9iM2IzmUfcygF43CDDAaoUT8mjH6v8oTm304IJYcjueW2VzqlonxPjwQ==
dependencies: dependencies:
"@vueuse/shared" "4.0.0-rc.7" "@vueuse/shared" "4.0.0-rc.8"
vue-demi latest vue-demi latest
"@vueuse/shared@4.0.0-rc.7": "@vueuse/shared@4.0.0-rc.8":
version "4.0.0-rc.7" version "4.0.0-rc.8"
resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-4.0.0-rc.7.tgz#3f7095caef42c3d2d7b0ea48bd7652257c95d5c2" resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-4.0.0-rc.8.tgz#4f948ad3a5600daaadd3136480ddd26e1cd8f246"
integrity sha512-KX/JS48jejv6Ezx4TLymjltKlfRFcdw9n9qT89D4J6ygU6cechJEtpD6ACCKGehy8VkW2xKHduvioZtSLr3cNQ== integrity sha512-oXPPaKAAdknvXD/unbqsXdZ2E0w1iMYrgAvEqd82ei9STyGBhPL4mQ1aXq4uKwFpVi1Qt6GxXRfAurbvbDox2Q==
dependencies: dependencies:
vue-demi latest vue-demi latest