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