diff --git a/packages/client/src/components/global/RouterView.vue b/packages/client/src/components/global/RouterView.vue index f8ad22f28e..f5e6943b16 100644 --- a/packages/client/src/components/global/RouterView.vue +++ b/packages/client/src/components/global/RouterView.vue @@ -1,6 +1,22 @@ <template> + <KeepAlive> + <Suspense v-if="currentPageKeepAlive"> + <component + :is="currentPageComponent" + :key="key" + v-bind="Object.fromEntries(currentPageProps)" + tabindex="-1" + v-focus + style="outline: none" + /> + + <template #fallback> + <MkLoading /> + </template> + </Suspense> + </KeepAlive> <KeepAlive :max="defaultStore.state.numberOfPageCache"> - <Suspense> + <Suspense v-if="!currentPageKeepAlive"> <component :is="currentPageComponent" :key="key" @@ -57,6 +73,7 @@ function resolveNested(current: Resolved, d = 0): Resolved | null { const current = resolveNested(router.current)!; let currentPageComponent = $shallowRef(current.route.component); +let currentPageKeepAlive = $shallowRef(current.route.keepAlive); let currentPageProps = $ref(current.props); let key = $ref( current.route.path + JSON.stringify(Object.fromEntries(current.props)), @@ -66,6 +83,7 @@ function onChange({ resolved, key: newKey }) { const current = resolveNested(resolved); if (current == null) return; currentPageComponent = current.route.component; + currentPageKeepAlive = current.route.keepAlive; currentPageProps = current.props; key = current.route.path + JSON.stringify(Object.fromEntries(current.props)); diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts index 7e481f1484..9a5c35ebd2 100644 --- a/packages/client/src/nirax.ts +++ b/packages/client/src/nirax.ts @@ -12,6 +12,7 @@ type RouteDef = { loginRequired?: boolean; name?: string; hash?: string; + keepAlive?: boolean; globalCacheKey?: string; children?: RouteDef[]; }; diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts index cee863c43c..1b738569f0 100644 --- a/packages/client/src/router.ts +++ b/packages/client/src/router.ts @@ -657,6 +657,7 @@ export const routes = [ component: $i ? page(() => import("./pages/timeline.vue")) : page(() => import("./pages/welcome.vue")), + keepAlive: true, globalCacheKey: "index", }, {