tanstack-vue-router-skilld
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill tanstack-vue-router-skilld
Agent 安装分布
Skill 文档
TanStack/router @tanstack/vue-router
Version: 1.161.1 (Feb 2026) Deps: @tanstack/vue-store@^0.8.0, @vue/runtime-dom@^3.5.25, isbot@^5.1.22, jsesc@^3.0.2, tiny-invariant@^1.3.3, tiny-warning@^1.0.3, @tanstack/history@1.154.14, @tanstack/router-core@1.161.1 Tags: latest: 1.161.1 (Feb 2026)
References: Docs â API reference, guides ⢠GitHub Issues â bugs, workarounds, edge cases ⢠GitHub Discussions â Q&A, patterns, recipes ⢠Releases â changelog, breaking changes, new APIs
API Changes
This section documents version-specific API changes â prioritize recent major/minor releases.
-
BREAKING:
NotFoundRoute¬FoundRouteâ v1.x deprecated theNotFoundRouteAPI and therouterOptions.notFoundRouteproperty. UsenotFoundComponentin route options ordefaultNotFoundComponentincreateRouterinstead source -
BREAKING:
opts.navigateâopts.navigateinsidebeforeLoadandloaderis deprecated since v1.x. Usethrow redirect({ to: '...' })for navigation-triggered redirects instead source -
DEPRECATED:
parseParams&stringifyParamsâ these top-level route properties are deprecated in favor of nestedparams.parseandparams.stringifyobjects for better organization source -
DEPRECATED:
preSearchFilters&postSearchFiltersâ deprecated since v1.x in favor of the more powerfulsearch.middlewaresarray for transforming search parameters source -
DEPRECATED:
<ScrollRestoration />â the component is deprecated. Use theuseScrollRestorationhook or thedefaultHashScrollIntoViewrouter option for automatic hash scrolling source -
NEW:
protocolAllowlistâ newcreateRouteroption to prevent XSS by restricting allowed URL protocols in links and redirects (defaults to safe web protocols) source -
NEW: SSR Methods â
head,headers, andscriptsmethods added to route options for server-side SEO metadata, script injection, and custom HTTP headers source -
NEW:
search.middlewaresâ new array-based middleware system supportingretainSearchParamsandstripSearchParamshelpers to manage query params in generated links source -
NEW: Validation Adapters â
@tanstack/zod-adapter,@tanstack/valibot-adapter, and@tanstack/arktype-adapterprovide type-safe validation with distinct input/output type inference source -
NEW:
defaultViewTransitionâ added tocreateRouterto enable native View Transitions API support during navigation where supported by the browser source -
NEW:
rewriteâcreateRouteroption for bidirectional URL transformation, allowing patterns like stripping locale prefixes before matching and adding them back in links source -
NEW:
Wrap&InnerWrapâ newcreateRouterproperties for injecting global providers (e.g., Theme, Auth) that wrap the entire router or its inner content source -
NEW:
codeSplitGroupingsâ provides fine-grained control over how the router groups lazy-loaded route assets (loader, component, etc.) into chunks source -
DEPRECATED: Router Classes â
Router,Route,RootRoute, andFileRouteclasses are deprecated in favor of factory functions likecreateRouter,createRoute, andcreateFileRoutesource
Also changed: rootRouteWithContext renamed to createRootRouteWithContext · defaultRemountDeps new · defaultStructuralSharing new · NotFoundError.global deprecated · search.strict new · SearchSchemaInput new tag · standard-schema support new
Best Practices
-
Use
getRouteApi(routeId)for type-safe hook access in child components to avoid circular dependencies with route definitions source -
Follow the specific property order (e.g.,
beforeLoadbeforeloader) increateFileRouteto ensure correct TypeScript inference forcontextand other properties source -
Throw
redirect()frombeforeLoadfor authentication to stop the loading lifecycle before any child route or loader executes source -
Use
zodValidatorwith thefallback()generic from@tanstack/zod-adapterto provide defaults for invalid search params, keepingLinksearch props optional and type-safe source -
Configure
retainSearchParamsmiddleware in the root route to automatically persist global URL state (like themes or sessions) across all generated links source -
Include only necessary search params in
loaderDepsto prevent unrelated URL changes from triggering redundant loader executions source -
Pass the
abortController.signalfrom loader context to async fetch calls to automatically cancel stale requests when users navigate away source -
Return promises directly from loaders for deferred data loadingâmanual wrapping with
defer()is no longer required as promises are handled automatically source -
Set
defaultPreload: 'intent'increateRouterto enable global hover/touch-based preloading, which significantly improves perceived performance for most applications source -
Enable
defaultStructuralSharing: trueincreateRouterto preserve object references in search param selectors and minimize unnecessary Vue component re-renders source