SuperAPI AI 工具集

tanstack-vue-router-skilld

前端与建站

查看项目

更新于 10-16 03:17

技能介绍

用途:在编写、调试或重构使用 @tanstack/vue-router(Vue 版 TanStack Router)的代码时提供指引。适配版本 1.170.35,要求 vue >= 3.3.0、Node >= 20.19,仅 ESM。不要与 vue-router 混用,不要从 vue-router 引入 useRoute/useRouter,也不要使用 <router-view>/<router-link>。

主要能力:涵盖文件式与代码式路由搭建、路由注册以获得类型安全、组合式函数、组件、数据加载与重定向、搜索参数校验,以及 1.170.x 的弃用项与最佳实践。

使用方式:安装 npm install @tanstack/vue-router 及开发依赖 @tanstack/router-plugin、@vitejs/plugin-vue、@vitejs/plugin-vue-jsx;在 vite.config.ts 中于 vue() 之前加入 tanstackRouter({ target: 'vue', autoCodeSplitting: true })。通过 createRouter、routeTree 和 RouterProvider 挂载,并用 Register 声明注册 router 类型。

关键规则:多数组合式函数返回 Ref<T>,脚本中需用 .value;useRouter、useNavigate、useLinkProps、useAwaited 不返回 ref。不要对推断出的路由类型做强制转换或注解。beforeLoad/loader 是普通异步函数,不能在其中运行 Vue 组合式函数。

限制:资料未提供官方文本之外的价格、平台或效果信息;部分具体行为需参考对应 references 文档。