用途
@tanstack/vue-router 是 TanStack Router 的 Vue 绑定，用于在 Vue 应用中接入 TanStack Router 的路由能力，包含 Vue 专用的组件、组合式函数与项目配置方式。该技能建立在 router-core 之上，基础概念需先参考 router-core。
主要能力
包含 Vue 专用绑定、组件与组合式函数，并支持基于文件的路由方式。组件方面提供 RouterProvider、Link、Outlet、Navigate、Await（异步 setup 组件，配合 Vue 的 Suspense）、CatchBoundary（基于 Vue onErrorCaptured 的错误边界）、ClientOnly（在 onMounted 之后渲染子内容）、以及 Vue 专用的 SSR 外壳组件 Html 与 Body（内部配合 HeadContent 与 Scripts）。组合式函数方面提供 useRouter（返回 TRouter，非 Ref）、useRouterState（返回 Ref，暴露整个状态，有性能开销，匹配或位置场景建议用 useMatches 与 useLocation）、useNavigate（返回函数，非 Ref）、useSearch、useParams、useLoaderData、useMatch、useMatches、useRouteContext、useBlocker、useCanGoBack、useLocation、useLoaderDeps、useLinkProps、useMatchRoute 等。Link 提供 to 与 params 属性，并支持作用域插槽获取 isActive 状态。还提供 createLink 用于封装自定义 Link 组件。
使用方式
安装：npm install @tanstack/vue-router；npm install -D @tanstack/router-plugin @vitejs/plugin-vue-jsx。Vite 配置中需引入 tanstackRouter({ target: 'vue', autoCodeSplitting: true })，该插件必须放在 vue() 之前，并配合 vue() 与 vueJsx()（JSX/TSX 路由文件需要）。创建根路由使用 createRootRoute，路由文件使用 createFileRoute，随后在入口 createRouter({ routeTree })，并通过 declare module '@tanstack/vue-router' 声明 Register 以启用类型安全（否则 Link、useNavigate、useSearch 无类型安全）。挂载方式为 createApp(RouterProvider, { router })。
适用场景
适用于需要在 Vue 项目中使用 TanStack Router 的场景，包括基于文件的路由、类型安全导航、搜索参数与参数读取、加载器数据读取、路由上下文认证控制、以及可选的拆分文件按需加载约定（myRoute.ts、myRoute.component.vue、myRoute.errorComponent.vue、myRoute.notFoundComponent.vue、myRoute.lazy.ts）。事件处理中可结合 await 数据保存后调用 navigate 跳转；认证可在 beforeLoad 中根据 context.auth 判断并 throw redirect。
限制与注意事项
类型为完全推断，资料强调不要类型转换、不要为推断值添加类型标注。TanStack Router 是客户端优先，加载器默认在客户端运行而非服务端。多数组合式函数返回 Ref<T>，在 script 中必须用 .value 访问（如 params.value.postId），模板中自动解包，这是与 React 版本最主要的差异。@tanstack/vue-router 与官方 vue-router 是不同库，API 不同，不能混用其 router-view、router-link、useRoute、useRouter 等。beforeLoad 与 loader 是普通异步函数，不是组件 setup 函数，不能在其中使用 Vue 组合式函数，状态应通过路由上下文传递。插件配置必须设置 target: 'vue'，默认为 'react'。关于收费、价格、平台与效果等事实，资料暂未提供。