[{"data":1,"prerenderedAt":219},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fhow-use-typed-vue-router":3,"surround:\u002Fposts\u002F2025\u002Fhow-use-typed-vue-router":208},{"id":4,"title":5,"body":6,"canonical":181,"categories":182,"date":184,"description":185,"draft":186,"extension":187,"image":188,"meta":189,"navigation":190,"path":191,"permalink":181,"readingTime":192,"recommend":181,"references":181,"seo":197,"sitemap":198,"stem":201,"tags":202,"type":181,"updated":184,"__hash__":207},"content\u002Fposts\u002F2025\u002Fhow-use-typed-vue-router.md","如何使用 Vue Router 的类型化路由",{"type":7,"value":8,"toc":170},"minimark",[9,19,27,31,37,48,51,58,66,69,81,87,93,96,103,109,120,131,138,141,145,148,158,161,164],[10,11,12,13,18],"p",{},"在 vue-router ",[14,15,17],"badge",{":round":16},"true","4.4.0+"," 版本中，你可以使用插件来增强 Vue Router 在 TS 项目中的使用体验。",[10,20,21,22,26],{},"如果你使用 Vite 作为构建工具，那么可以使用 ",[14,23,25],{"link":24},"https:\u002F\u002Fgithub.com\u002Fposva\u002Funplugin-vue-router","unplugin-vue-router"," 插件来自动化生成路由和类型。\n当然你也可以手动进行配置，但是这很容易出错。",[28,29,30],"h2",{"id":30},"安装",[10,32,33,34,36],{},"我们可以先安装 ",[14,35,25],{"link":24}," 插件：",[38,39,45],"pre",{"className":40,"code":42,"language":43,"meta":44},[41],"language-bash","pnpm i -D unplugin-vue-router\n","bash","",[46,47,42],"code",{"__ignoreMap":44},[28,49,50],{"id":50},"配置",[10,52,53,54,57],{},"在 ",[46,55,56],{"code":56},"vite.config.ts"," 中配置插件：",[38,59,64],{"className":60,"code":62,"language":63,"meta":44},[61],"language-ts","import vue from '@vitejs\u002Fplugin-vue'\nimport VueRouter from 'unplugin-vue-router\u002Fvite'\nimport { defineConfig } from 'vite'\n\n\u002F\u002F https:\u002F\u002Fvite.dev\u002Fconfig\u002F\nexport default defineConfig({\n    plugins: [\n        VueRouter(), \u002F\u002F 这个插件需要放到 Vue 插件之前\n        vue()\n    ],\n})\n","ts",[46,65,62],{"__ignoreMap":44},[10,67,68],{},"配置 tsconfig.json 文件",[38,70,79],{"className":71,"code":73,"highlights":74,"language":78,"meta":44},[72],"language-json","{\n  \"files\": [],\n  \"include\": [\".\u002Ftyped-router.d.ts\"],\n  \"compilerOptions\": {\n    \"moduleResolution\": \"Bundler\",\n    \"types\": [\"unplugin-vue-router\u002Fclient\"]\n  },\n  \"references\": [{ \"path\": \".\u002Ftsconfig.app.json\" }, { \"path\": \".\u002Ftsconfig.node.json\" }]\n}\n",[75,76,77],3,5,6,"json",[46,80,73],{"__ignoreMap":44},[10,82,83,84],{},"配置 ",[46,85,86],{"code":86},"vite-env.d.ts",[38,88,91],{"className":89,"code":90,"language":63,"meta":44},[61],"\u002F\u002F env.d.ts\n\u002F\u002F\u002F \u003Creference types=\"vite\u002Fclient\" \u002F>\n\u002F\u002F\u002F \u003Creference types=\"unplugin-vue-router\u002Fclient\" \u002F>\n",[46,92,90],{"__ignoreMap":44},[28,94,95],{"id":95},"使用",[10,97,98,99,102],{},"从 ",[46,100,101],{"code":101},"vue-router\u002Fauto-routes"," 导入生成的 routes，将它传递给 CreateRouter",[38,104,107],{"className":105,"code":106,"language":63,"meta":44},[61],"import { createRouter, createWebHistory } from 'vue-router'\nimport { routes } from 'vue-router\u002Fauto-routes'\n\nconst router = createRouter({\n    routes,\n    history: createWebHistory()\n})\n",[46,108,106],{"__ignoreMap":44},[10,110,111,112,115,116,119],{},"然后，我们就可以在 ",[46,113,114],{"code":114},"src\u002Fpages"," 目录下创建文件了，所有的 vue 文件都会被视为一个页面，会自动生成路由。生成的 TS 类型文件会保存在 ",[46,117,118],{"code":118},"typed-router.d.ts"," 中。",[10,121,122,123,126,127,130],{},"这样我们在使用 ",[46,124,125],{"code":125},"router-link"," 或者 ",[46,128,129],{"code":129},"router.push"," 时，就可以获得类型提示了。",[10,132,133],{},[134,135],"img",{"alt":136,"src":137},"类型化路由效果","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Ftyped-routes.png",[28,139,140],{"id":140},"其余配置",[142,143,144],"h3",{"id":144},"插件其余配置",[10,146,147],{},"我们可以在vite.config.ts中配置其余参数",[38,149,156],{"className":150,"code":151,"highlights":152,"language":63,"meta":44},[61],"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport VueRouter from 'unplugin-vue-router\u002Fvite'\n\n\u002F\u002F https:\u002F\u002Fvite.dev\u002Fconfig\u002F\nexport default defineConfig({\n  plugins: [\n    VueRouter({\n      dts: '\u002Ftypes\u002Ftyped-router.d.ts', \u002F\u002F 指定生成的类型文件路径\n      exclude: [\"**\u002Fcomponents\u002F**\", \"**\u002Flayouts\u002F**\",'**\u002Fdata\u002F**', '**\u002Ftypes\u002F**'], \u002F\u002F 排除不需要生成路由的文件\n      extensions: ['vue'], \u002F\u002F 支持的文件扩展名\n    }), \u002F\u002F 这个插件需要放到 Vue 插件之前\n    vue()\n  ],\n})\n",[153,154,155],9,10,11,[46,157,151],{"__ignoreMap":44},[142,159,160],{"id":160},"热重载",[10,162,163],{},"配置热重载，在创建文件时更新路由类型文件",[38,165,168],{"className":166,"code":167,"language":63,"meta":44},[61],"import { createRouter, createWebHistory } from 'vue-router'\nimport { handleHotUpdate, routes } from 'vue-router\u002Fauto-routes'\n\nconst router = createRouter({\n    routes,\n    history: createWebHistory()\n})\n\nif (import.meta.env) {\n    handleHotUpdate(router)\n}\n",[46,169,167],{"__ignoreMap":44},{"title":44,"searchDepth":171,"depth":171,"links":172},4,[173,175,176,177],{"id":30,"depth":174,"text":30},2,{"id":50,"depth":174,"text":50},{"id":95,"depth":174,"text":95},{"id":140,"depth":174,"text":140,"children":178},[179,180],{"id":144,"depth":75,"text":144},{"id":160,"depth":75,"text":160},null,[183],"代码","2025-06-12 16:23:42","现在你可以使用 Vue Router 的类型化路由来增强你的 Vue 应用的类型安全性和可维护性。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fvue-router-typed-router-cover.png",{},true,"\u002Fposts\u002F2025\u002Fhow-use-typed-vue-router",{"text":193,"minutes":194,"time":195,"words":196},"3 min read",2.19,131400,438,{"title":5,"description":185},{"loc":191,"images":199},[200],{"loc":137},"posts\u002F2025\u002Fhow-use-typed-vue-router",[203,204,205,25,206],"TypeScript","Vue","Vue Router","Vite","5CHIBRHqon_sZ1G4t33cUVxFjW_xH42MaoX8FOIwg48",[209,214],{"title":210,"path":211,"stem":212,"date":213,"type":181,"children":-1},"tailwindcss-v4 兼容性处理","\u002Fposts\u002F2025\u002Ftailwindcss-v4-compatibility-processing","posts\u002F2025\u002Ftailwindcss-v4-compatibility-processing","2025-06-07 19:28:44",{"title":215,"path":216,"stem":217,"date":218,"type":181,"children":-1},"使用 caddy 替换 nginx","\u002Fposts\u002F2025\u002Fcaddy","posts\u002F2025\u002Fcaddy","2025-06-15 15:47:28",1789642589354]