[{"data":1,"prerenderedAt":858},["ShallowReactive",2],{"navigation":3,"-guide-basics-routing":184,"-guide-basics-routing-surround":853},[4,91,133,161,168],{"title":5,"path":6,"stem":7,"children":8,"icon":90},"Guide","/guide","1.guide/0.index",[9,12,53,69],{"title":10,"path":6,"stem":7,"icon":11},"Getting Started","pixel:play",{"title":5,"icon":13,"path":14,"stem":15,"children":16,"page":52},"ph:book-open-duotone","/guide/basics","1.guide/1.basics",[17,22,27,32,37,42,47],{"title":18,"path":19,"stem":20,"icon":21},"Request Lifecycle","/guide/basics/lifecycle","1.guide/1.basics/1.lifecycle","icon-park-outline:handle-round",{"title":23,"path":24,"stem":25,"icon":26},"Routing","/guide/basics/routing","1.guide/1.basics/2.routing","solar:routing-bold",{"title":28,"path":29,"stem":30,"icon":31},"Middleware","/guide/basics/middleware","1.guide/1.basics/3.middleware","mdi:middleware-outline",{"title":33,"path":34,"stem":35,"icon":36},"Event Handlers","/guide/basics/handler","1.guide/1.basics/4.handler","mdi:function",{"title":38,"path":39,"stem":40,"icon":41},"Sending Response","/guide/basics/response","1.guide/1.basics/5.response","tabler:json",{"title":43,"path":44,"stem":45,"icon":46},"Error Handling","/guide/basics/error","1.guide/1.basics/6.error","tabler:error-404",{"title":48,"path":49,"stem":50,"icon":51},"Nested Apps","/guide/basics/nested-apps","1.guide/1.basics/7.nested-apps","material-symbols-light:layers-outline",false,{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":52},"API","material-symbols-light:api-rounded","/guide/api","1.guide/900.api",[59,64],{"title":60,"path":61,"stem":62,"icon":63},"H3","/guide/api/h3","1.guide/900.api/1.h3","material-symbols:bolt-rounded",{"title":65,"path":66,"stem":67,"icon":68},"H3Event","/guide/api/h3event","1.guide/900.api/2.h3event","material-symbols:data-object-rounded",{"title":70,"icon":71,"path":72,"stem":73,"children":74,"page":52},"Advanced","hugeicons:more-01","/guide/advanced","1.guide/901.advanced",[75,80,85],{"title":76,"path":77,"stem":78,"icon":79},"Plugins","/guide/advanced/plugins","1.guide/901.advanced/1.plugins","clarity:plugin-line",{"title":81,"path":82,"stem":83,"icon":84},"WebSockets","/guide/advanced/websocket","1.guide/901.advanced/2.websocket","hugeicons:live-streaming-02",{"title":86,"path":87,"stem":88,"icon":89},"Nightly Builds","/guide/advanced/nightly","1.guide/901.advanced/9.nightly","game-icons:barn-owl","i-ph:book-open-duotone",{"title":92,"path":93,"stem":94,"children":95,"icon":97},"Utils","/utils","2.utils/0.index",[96,98,103,108,113,118,123,128],{"title":92,"path":93,"stem":94,"icon":97},"ph:function-bold",{"title":99,"path":100,"stem":101,"icon":102},"Request","/utils/request","2.utils/1.request","material-symbols-light:input",{"title":104,"path":105,"stem":106,"icon":107},"Response","/utils/response","2.utils/2.response","material-symbols-light:output",{"title":109,"path":110,"stem":111,"icon":112},"Cookie","/utils/cookie","2.utils/3.cookie","material-symbols:cookie-outline",{"title":114,"path":115,"stem":116,"icon":117},"Security","/utils/security","2.utils/4.security","wpf:key-security",{"title":119,"path":120,"stem":121,"icon":122},"Proxy","/utils/proxy","2.utils/5.proxy","arcticons:super-proxy",{"title":124,"path":125,"stem":126,"icon":127},"More utils","/utils/more","2.utils/9.more","mingcute:plus-line",{"title":129,"path":130,"stem":131,"icon":132},"Community","/utils/community","2.utils/99.community","lets-icons:external",{"title":134,"path":135,"stem":136,"children":137,"icon":139},"Examples","/examples","4.examples/0.index",[138,140,145,149,153,157],{"title":134,"path":135,"stem":136,"icon":139},"ph:code",{"title":141,"path":142,"stem":143,"icon":144},"Cookies","/examples/handle-cookie","4.examples/handle-cookie","ph:arrow-right",{"title":146,"path":147,"stem":148,"icon":144},"Sessions","/examples/handle-session","4.examples/handle-session",{"title":150,"path":151,"stem":152,"icon":144},"Static Assets","/examples/serve-static-assets","4.examples/serve-static-assets",{"title":154,"path":155,"stem":156,"icon":144},"Stream Response","/examples/stream-response","4.examples/stream-response",{"title":158,"path":159,"stem":160,"icon":144},"Validate Data","/examples/validate-data","4.examples/validate-data",{"title":162,"path":163,"stem":164,"children":165,"icon":167},"Migration","/migration","5.migration/0.index",[166],{"title":162,"path":163,"stem":164,"icon":167},"icons8:up-round",{"title":169,"path":170,"stem":171,"children":172},"Blog","/blog","99.blog",[173,176,180],{"title":169,"path":170,"stem":174,"icon":175},"99.blog/index","i-lucide-file-text",{"title":177,"path":178,"stem":179,"icon":175},"H3 1.8 - Towards the Edge of the Web","/blog/v1.8","99.blog/1.v1.8",{"title":181,"path":182,"stem":183,"icon":175},"H3 v2 beta","/blog/v2-beta","99.blog/2.v2-beta",{"id":185,"title":23,"body":186,"description":847,"extension":848,"meta":849,"navigation":850,"path":24,"seo":851,"stem":25,"__hash__":852},"content/1.guide/1.basics/2.routing.md",{"type":187,"value":188,"toc":841,"icon":26},"minimark",[189,194,229,242,257,345,348,422,430,477,481,488,557,568,597,601,623,669,682,691,695,698,826,837],[190,191,193],"h2",{"id":192},"adding-routes","Adding Routes",[195,196,197,198,202,203,206,207,214,215,221,222,228],"p",{},"You can register route ",[199,200,201],"a",{"href":34},"handlers"," to ",[199,204,205],{"href":61},"H3 instance"," using ",[199,208,210],{"href":209},"/guide/api/h3#h3on",[211,212,213],"code",{},"H3.on",", ",[199,216,218],{"href":217},"/guide/api/h3#h3method",[211,219,220],{},"H3.[method]",", or ",[199,223,225],{"href":224},"/guide/api/h3#h3all",[211,226,227],{},"H3.all",".",[230,231,232],"tip",{},[195,233,234,235,241],{},"\nRouter is powered by ",[199,236,240],{"href":237,"rel":238},"https://github.com/h3js/rou3",[239],"nofollow","🌳 Rou3",", an ultra-fast and tiny route matcher engine.",[195,243,244,248,249,252,253,256],{},[245,246,247],"strong",{},"Example:"," Register a route to match requests to the ",[211,250,251],{},"/hello"," endpoint with HTTP ",[245,254,255],{},"GET"," method.",[258,259,260,310],"ul",{},[261,262,263,264,268],"li",{},"Using ",[199,265,266],{"href":217},[211,267,220],{},[269,270,275],"pre",{"className":271,"code":272,"language":273,"meta":274,"style":274},"language-js shiki shiki-themes github-light github-dark github-dark","app.get(\"/hello\", () => \"Hello world!\");\n","js","",[211,276,277],{"__ignoreMap":274},[278,279,282,286,290,293,297,300,304,307],"span",{"class":280,"line":281},"line",1,[278,283,285],{"class":284},"slsVL","app.",[278,287,289],{"class":288},"shcOC","get",[278,291,292],{"class":284},"(",[278,294,296],{"class":295},"sfrk1","\"/hello\"",[278,298,299],{"class":284},", () ",[278,301,303],{"class":302},"so5gQ","=>",[278,305,306],{"class":295}," \"Hello world!\"",[278,308,309],{"class":284},");\n",[261,311,263,312,316],{},[199,313,314],{"href":209},[211,315,213],{},[269,317,319],{"className":271,"code":318,"language":273,"meta":274,"style":274},"app.on(\"GET\", \"/hello\", () => \"Hello world!\");\n",[211,320,321],{"__ignoreMap":274},[278,322,323,325,328,330,333,335,337,339,341,343],{"class":280,"line":281},[278,324,285],{"class":284},[278,326,327],{"class":288},"on",[278,329,292],{"class":284},[278,331,332],{"class":295},"\"GET\"",[278,334,214],{"class":284},[278,336,296],{"class":295},[278,338,299],{"class":284},[278,340,303],{"class":302},[278,342,306],{"class":295},[278,344,309],{"class":284},[195,346,347],{},"You can register multiple event handlers for the same route with different methods:",[269,349,351],{"className":271,"code":350,"language":273,"meta":274,"style":274},"app\n  .get(\"/hello\", () => \"GET Hello world!\")\n  .post(\"/hello\", () => \"POST Hello world!\")\n  .all(\"/hello\", () => \"Any other method!\");\n",[211,352,353,358,380,401],{"__ignoreMap":274},[278,354,355],{"class":280,"line":281},[278,356,357],{"class":284},"app\n",[278,359,361,364,366,368,370,372,374,377],{"class":280,"line":360},2,[278,362,363],{"class":284},"  .",[278,365,289],{"class":288},[278,367,292],{"class":284},[278,369,296],{"class":295},[278,371,299],{"class":284},[278,373,303],{"class":302},[278,375,376],{"class":295}," \"GET Hello world!\"",[278,378,379],{"class":284},")\n",[278,381,383,385,388,390,392,394,396,399],{"class":280,"line":382},3,[278,384,363],{"class":284},[278,386,387],{"class":288},"post",[278,389,292],{"class":284},[278,391,296],{"class":295},[278,393,299],{"class":284},[278,395,303],{"class":302},[278,397,398],{"class":295}," \"POST Hello world!\"",[278,400,379],{"class":284},[278,402,404,406,409,411,413,415,417,420],{"class":280,"line":403},4,[278,405,363],{"class":284},[278,407,408],{"class":288},"all",[278,410,292],{"class":284},[278,412,296],{"class":295},[278,414,299],{"class":284},[278,416,303],{"class":302},[278,418,419],{"class":295}," \"Any other method!\"",[278,421,309],{"class":284},[195,423,424,425,429],{},"You can also use ",[199,426,427],{"href":224},[211,428,227],{}," method to register a route accepting any HTTP method:",[269,431,433],{"className":271,"code":432,"language":273,"meta":274,"style":274},"app.all(\"/hello\", (event) => `This is a ${event.req.method} request!`);\n",[211,434,435],{"__ignoreMap":274},[278,436,437,439,441,443,445,448,452,455,457,460,462,464,467,469,472,475],{"class":280,"line":281},[278,438,285],{"class":284},[278,440,408],{"class":288},[278,442,292],{"class":284},[278,444,296],{"class":295},[278,446,447],{"class":284},", (",[278,449,451],{"class":450},"sQHwn","event",[278,453,454],{"class":284},") ",[278,456,303],{"class":302},[278,458,459],{"class":295}," `This is a ${",[278,461,451],{"class":284},[278,463,228],{"class":295},[278,465,466],{"class":284},"req",[278,468,228],{"class":295},[278,470,471],{"class":284},"method",[278,473,474],{"class":295},"} request!`",[278,476,309],{"class":284},[190,478,480],{"id":479},"dynamic-routes","Dynamic Routes",[195,482,483,484,487],{},"You can define dynamic route parameters using ",[211,485,486],{},":"," prefix:",[269,489,491],{"className":271,"code":490,"language":273,"meta":274,"style":274},"// [GET] /hello/Bob => \"Hello, Bob!\"\napp.get(\"/hello/:name\", (event) => {\n  return `Hello, ${event.context.params.name}!`;\n});\n",[211,492,493,499,521,552],{"__ignoreMap":274},[278,494,495],{"class":280,"line":281},[278,496,498],{"class":497},"sCsY4","// [GET] /hello/Bob => \"Hello, Bob!\"\n",[278,500,501,503,505,507,510,512,514,516,518],{"class":280,"line":360},[278,502,285],{"class":284},[278,504,289],{"class":288},[278,506,292],{"class":284},[278,508,509],{"class":295},"\"/hello/:name\"",[278,511,447],{"class":284},[278,513,451],{"class":450},[278,515,454],{"class":284},[278,517,303],{"class":302},[278,519,520],{"class":284}," {\n",[278,522,523,526,529,531,533,536,538,541,543,546,549],{"class":280,"line":382},[278,524,525],{"class":302},"  return",[278,527,528],{"class":295}," `Hello, ${",[278,530,451],{"class":284},[278,532,228],{"class":295},[278,534,535],{"class":284},"context",[278,537,228],{"class":295},[278,539,540],{"class":284},"params",[278,542,228],{"class":295},[278,544,545],{"class":284},"name",[278,547,548],{"class":295},"}!`",[278,550,551],{"class":284},";\n",[278,553,554],{"class":280,"line":403},[278,555,556],{"class":284},"});\n",[195,558,559,560,563,564,567],{},"Instead of named parameters, you can use ",[211,561,562],{},"*"," for unnamed ",[245,565,566],{},"optional"," parameters:",[269,569,571],{"className":271,"code":570,"language":273,"meta":274,"style":274},"app.get(\"/hello/*\", (event) => `Hello!`);\n",[211,572,573],{"__ignoreMap":274},[278,574,575,577,579,581,584,586,588,590,592,595],{"class":280,"line":281},[278,576,285],{"class":284},[278,578,289],{"class":288},[278,580,292],{"class":284},[278,582,583],{"class":295},"\"/hello/*\"",[278,585,447],{"class":284},[278,587,451],{"class":450},[278,589,454],{"class":284},[278,591,303],{"class":302},[278,593,594],{"class":295}," `Hello!`",[278,596,309],{"class":284},[190,598,600],{"id":599},"wildcard-routes","Wildcard Routes",[195,602,603,604,607,608,611,612,615,616,619,620,487],{},"Adding ",[211,605,606],{},"/hello/:name"," route will match ",[211,609,610],{},"/hello/world"," or ",[211,613,614],{},"/hello/123",". But it will not match ",[211,617,618],{},"/hello/foo/bar",".\nWhen you need to match multiple levels of sub routes, you can use ",[211,621,622],{},"**",[269,624,626],{"className":271,"code":625,"language":273,"meta":274,"style":274},"app.get(\"/hello/**\", (event) => `Hello ${event.context.params._}!`);\n",[211,627,628],{"__ignoreMap":274},[278,629,630,632,634,636,639,641,643,645,647,650,652,654,656,658,660,662,665,667],{"class":280,"line":281},[278,631,285],{"class":284},[278,633,289],{"class":288},[278,635,292],{"class":284},[278,637,638],{"class":295},"\"/hello/**\"",[278,640,447],{"class":284},[278,642,451],{"class":450},[278,644,454],{"class":284},[278,646,303],{"class":302},[278,648,649],{"class":295}," `Hello ${",[278,651,451],{"class":284},[278,653,228],{"class":295},[278,655,535],{"class":284},[278,657,228],{"class":295},[278,659,540],{"class":284},[278,661,228],{"class":295},[278,663,664],{"class":284},"_",[278,666,548],{"class":295},[278,668,309],{"class":284},[195,670,671,672,214,674,214,676,214,678,681],{},"This will match ",[211,673,251],{},[211,675,610],{},[211,677,614],{},[211,679,680],{},"/hello/world/123",", etc.",[683,684,685],"note",{},[195,686,687,688,690],{},"\nParam ",[211,689,664],{}," will store the full wildcard content as a single string.",[190,692,694],{"id":693},"route-meta","Route Meta",[195,696,697],{},"You can define optional route meta when registering them, accessible from any middleware.",[269,699,701],{"className":271,"code":700,"language":273,"meta":274,"style":274},"import { H3 } from \"h3\";\n\nconst app = new H3();\n\napp.use((event) => {\n  console.log(event.context.matchedRoute?.meta); // { auth: true }\n});\n\napp.get(\"/\", (event) => \"Hi!\", { meta: { auth: true } });\n",[211,702,703,719,725,746,750,769,784,789,794],{"__ignoreMap":274},[278,704,705,708,711,714,717],{"class":280,"line":281},[278,706,707],{"class":302},"import",[278,709,710],{"class":284}," { H3 } ",[278,712,713],{"class":302},"from",[278,715,716],{"class":295}," \"h3\"",[278,718,551],{"class":284},[278,720,721],{"class":280,"line":360},[278,722,724],{"emptyLinePlaceholder":723},true,"\n",[278,726,727,730,734,737,740,743],{"class":280,"line":382},[278,728,729],{"class":302},"const",[278,731,733],{"class":732},"suiK_"," app",[278,735,736],{"class":302}," =",[278,738,739],{"class":302}," new",[278,741,742],{"class":288}," H3",[278,744,745],{"class":284},"();\n",[278,747,748],{"class":280,"line":403},[278,749,724],{"emptyLinePlaceholder":723},[278,751,753,755,758,761,763,765,767],{"class":280,"line":752},5,[278,754,285],{"class":284},[278,756,757],{"class":288},"use",[278,759,760],{"class":284},"((",[278,762,451],{"class":450},[278,764,454],{"class":284},[278,766,303],{"class":302},[278,768,520],{"class":284},[278,770,772,775,778,781],{"class":280,"line":771},6,[278,773,774],{"class":284},"  console.",[278,776,777],{"class":288},"log",[278,779,780],{"class":284},"(event.context.matchedRoute?.meta); ",[278,782,783],{"class":497},"// { auth: true }\n",[278,785,787],{"class":280,"line":786},7,[278,788,556],{"class":284},[278,790,792],{"class":280,"line":791},8,[278,793,724],{"emptyLinePlaceholder":723},[278,795,797,799,801,803,806,808,810,812,814,817,820,823],{"class":280,"line":796},9,[278,798,285],{"class":284},[278,800,289],{"class":288},[278,802,292],{"class":284},[278,804,805],{"class":295},"\"/\"",[278,807,447],{"class":284},[278,809,451],{"class":450},[278,811,454],{"class":284},[278,813,303],{"class":302},[278,815,816],{"class":295}," \"Hi!\"",[278,818,819],{"class":284},", { meta: { auth: ",[278,821,822],{"class":732},"true",[278,824,825],{"class":284}," } });\n",[827,828,830],"read-more",{"to":829},"/guide/basics/handler#meta",[195,831,832,833,836],{},"It is also possible to add route meta when defining them using ",[211,834,835],{},"defineHandler"," object syntax.",[838,839,840],"style",{},"html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}",{"title":274,"searchDepth":360,"depth":360,"links":842},[843,844,845,846],{"id":192,"depth":360,"text":193},{"id":479,"depth":360,"text":480},{"id":599,"depth":360,"text":600},{"id":693,"depth":360,"text":694},"Each request is matched to one (most specific) route handler.","md",{"icon":26},{"icon":26},{"title":23,"description":847},"CRWWPjRbyCw084gDFUOpz3u2bCkIk2ELts65KZ0Dg84",[854,856],{"title":18,"path":19,"stem":20,"description":855,"icon":21,"children":-1},"H3 dispatches incoming web requests to final web responses.",{"title":28,"path":29,"stem":30,"description":857,"icon":31,"children":-1},"Intercept request, response and errors using H3 middleware.",1768646387234]