@tanstack/vue-router
Version:
Modern and scalable routing for Vue applications
43 lines (42 loc) • 1.76 kB
JavaScript
import { useRouter } from "./useRouter.js";
import { ScriptOnce } from "./ScriptOnce.js";
import { defaultGetScrollRestorationKey, escapeHtml, restoreScroll, storageKey } from "@tanstack/router-core";
import * as Vue from "vue";
import { createVNode } from "vue";
import { isServer } from "@tanstack/router-core/isServer";
//#region src/scroll-restoration.tsx
/**
* ScrollRestoration component for Vue.
* On server: renders a ScriptOnce with scroll restoration logic.
* On client during hydration: renders a matching ScriptOnce to avoid mismatch.
* After mount: renders nothing.
*/
var ScrollRestoration = Vue.defineComponent({
name: "ScrollRestoration",
setup() {
const router = useRouter();
const mounted = Vue.ref(false);
Vue.onMounted(() => {
mounted.value = true;
});
return () => {
if (mounted.value) return null;
if (!router.isScrollRestoring) return null;
if (typeof router.options.scrollRestoration === "function") {
if (!router.options.scrollRestoration({ location: router.latestLocation })) return null;
}
const userKey = (router.options.getScrollRestorationKey || defaultGetScrollRestorationKey)(router.latestLocation);
const resolvedKey = userKey !== defaultGetScrollRestorationKey(router.latestLocation) ? userKey : void 0;
const restoreScrollOptions = {
storageKey,
shouldScrollRestoration: true
};
if (resolvedKey) restoreScrollOptions.key = resolvedKey;
if (isServer ?? router.isServer) return createVNode(ScriptOnce, { "children": `(${restoreScroll.toString()})(${escapeHtml(JSON.stringify(restoreScrollOptions))})` }, null);
return createVNode(ScriptOnce, { "children": "" }, null);
};
}
});
//#endregion
export { ScrollRestoration };
//# sourceMappingURL=scroll-restoration.js.map