[{"data":1,"prerenderedAt":1315},["ShallowReactive",2],{"navigation_docs":3,"-adapters-svelte-spa-router":115,"-adapters-svelte-spa-router-surround":1310},[4,55,73,87,105],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":54},"Guides","i-lucide-book-open","\u002Fguides","1.guides",[10,14,18,22,26,30,34,38,42,46,50],{"title":11,"path":12,"stem":13},"Introduction","\u002Fguides\u002Fintroduction","1.guides\u002F0.introduction",{"title":15,"path":16,"stem":17},"Data","\u002Fguides\u002Fdata","1.guides\u002F1.data",{"title":19,"path":20,"stem":21},"Forms","\u002Fguides\u002Fform","1.guides\u002F2.form",{"title":23,"path":24,"stem":25},"List","\u002Fguides\u002Flist","1.guides\u002F3.list",{"title":27,"path":28,"stem":29},"Authentication","\u002Fguides\u002Fauthentication","1.guides\u002F4.authentication",{"title":31,"path":32,"stem":33},"Authorization","\u002Fguides\u002Fauthorization","1.guides\u002F5.authorization",{"title":35,"path":36,"stem":37},"Notifications","\u002Fguides\u002Fnotifications","1.guides\u002F6.notifications",{"title":39,"path":40,"stem":41},"Realtime","\u002Fguides\u002Frealtime","1.guides\u002F7.realtime",{"title":43,"path":44,"stem":45},"Router","\u002Fguides\u002Frouter","1.guides\u002F8.router",{"title":47,"path":48,"stem":49},"I18n","\u002Fguides\u002Fi18n","1.guides\u002F9.i18n",{"title":51,"path":52,"stem":53},"Controller","\u002Fguides\u002Fcontroller","1.guides\u002F99.controller",false,{"title":56,"icon":57,"path":58,"stem":59,"children":60,"page":54},"Integrations","i-lucide-blocks","\u002Fintegrations","2.integrations",[61,65,69],{"title":62,"path":63,"stem":64},"Vue","\u002Fintegrations\u002Fvue","2.integrations\u002F0.vue",{"title":66,"path":67,"stem":68},"Nuxt","\u002Fintegrations\u002Fnuxt","2.integrations\u002F1.nuxt",{"title":70,"path":71,"stem":72},"Svelte","\u002Fintegrations\u002Fsvelte","2.integrations\u002F2.svelte",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":54},"Adapters","i-lucide-plug","\u002Fadapters","3.adapters",[79,83],{"title":80,"path":81,"stem":82},"Vue Router","\u002Fadapters\u002Fvue-router","3.adapters\u002F0.vue-router",{"title":84,"path":85,"stem":86},"Svelte SPA Router","\u002Fadapters\u002Fsvelte-spa-router","3.adapters\u002F1.svelte-spa-router",{"title":88,"icon":89,"path":90,"stem":91,"children":92,"page":54},"Backend","i-lucide-server","\u002Fbackend","4.backend",[93,97,101],{"title":94,"path":95,"stem":96},"Directus","\u002Fbackend\u002Fdirectus","4.backend\u002F0.directus",{"title":98,"path":99,"stem":100},"Supabase","\u002Fbackend\u002Fsupabase","4.backend\u002F1.supabase",{"title":102,"path":103,"stem":104},"RESTful API","\u002Fbackend\u002Frest-api","4.backend\u002F9.rest-api",{"title":106,"icon":107,"path":108,"stem":109,"children":110,"page":54},"AI","i-lucide-sparkles","\u002Fai","5.ai",[111],{"title":112,"path":113,"stem":114},"Agent Skills","\u002Fai\u002Fskills","5.ai\u002F0.skills",{"id":116,"title":84,"body":117,"description":1304,"extension":1305,"links":1306,"meta":1307,"navigation":374,"path":85,"seo":1308,"stem":86,"__hash__":1309},"docs\u002F3.adapters\u002F1.svelte-spa-router.md",{"type":118,"value":119,"toc":1292},"minimark",[120,136,154,159,231,235,245,446,449,453,464,682,745,751,762,773,777,780,790,794,801,909,926,930,946,1089,1104,1113,1117,1123,1260,1264,1275,1288],[121,122,123,127,128,131,132,135],"p",{},[124,125,126],"code",{},"@ginjou\u002Fwith-svelte-spa-router"," implements Ginjou's ",[129,130,43],"a",{"href":44}," contract on top of ",[124,133,134],{},"svelte-spa-router",".",[121,137,138,139,142,143,145,146,149,150,135],{},"It covers the whole contract, including the optional ",[124,140,141],{},"blocker",". Unlike ",[129,144,80],{"href":81},", the blocker needs three things wired into your own ",[124,147,148],{},"\u003CRouter>"," — see ",[129,151,153],{"href":152},"#wire-up-the-blocker","Wire up the blocker",[155,156,158],"h2",{"id":157},"installation","Installation",[160,161,163,188,202,217],"code-group",{"sync":162},"package-manager",[164,165,171],"pre",{"className":166,"code":167,"filename":168,"language":169,"meta":170,"style":170},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark monokai","pnpm add @ginjou\u002Fwith-svelte-spa-router\n","pnpm","bash","",[124,172,173],{"__ignoreMap":170},[174,175,178,181,185],"span",{"class":176,"line":177},"line",1,[174,179,168],{"class":180},"sR7ES",[174,182,184],{"class":183},"sLACW"," add",[174,186,187],{"class":183}," @ginjou\u002Fwith-svelte-spa-router\n",[164,189,192],{"className":166,"code":190,"filename":191,"language":169,"meta":170,"style":170},"yarn add @ginjou\u002Fwith-svelte-spa-router\n","yarn",[124,193,194],{"__ignoreMap":170},[174,195,196,198,200],{"class":176,"line":177},[174,197,191],{"class":180},[174,199,184],{"class":183},[174,201,187],{"class":183},[164,203,206],{"className":166,"code":204,"filename":205,"language":169,"meta":170,"style":170},"npm install @ginjou\u002Fwith-svelte-spa-router\n","npm",[124,207,208],{"__ignoreMap":170},[174,209,210,212,215],{"class":176,"line":177},[174,211,205],{"class":180},[174,213,214],{"class":183}," install",[174,216,187],{"class":183},[164,218,221],{"className":166,"code":219,"filename":220,"language":169,"meta":170,"style":170},"bun add @ginjou\u002Fwith-svelte-spa-router\n","bun",[124,222,223],{"__ignoreMap":170},[174,224,225,227,229],{"class":176,"line":177},[174,226,220],{"class":180},[174,228,184],{"class":183},[174,230,187],{"class":183},[155,232,234],{"id":233},"setup","Setup",[121,236,237,238,241,242,135],{},"Call ",[124,239,240],{},"createRouter()"," during component initialisation, once, near the app root. It registers its own cleanup with ",[124,243,244],{},"onDestroy",[164,246,251],{"className":247,"code":248,"filename":249,"language":250,"meta":170,"style":170},"language-svelte shiki shiki-themes material-theme-lighter github-light github-dark monokai","\u003Cscript lang=\"ts\">\nimport { defineRouterContext } from '@ginjou\u002Fsvelte'\nimport { createRouter } from '@ginjou\u002Fwith-svelte-spa-router'\nimport Router from 'svelte-spa-router'\nimport { routes } from '.\u002Froutes'\n\nconst router = createRouter()\ndefineRouterContext(router)\n\u003C\u002Fscript>\n\n\u003CRouter routes={routes} \u002F>\n","App.svelte","svelte",[124,252,253,282,311,331,348,369,376,397,406,416,421],{"__ignoreMap":170},[174,254,255,259,263,267,270,274,277,279],{"class":176,"line":177},[174,256,258],{"class":257},"swvn1","\u003C",[174,260,262],{"class":261},"sHsBP","script",[174,264,266],{"class":265},"s_lYk"," lang",[174,268,269],{"class":257},"=",[174,271,273],{"class":272},"siCPE","\"",[174,275,276],{"class":183},"ts",[174,278,273],{"class":272},[174,280,281],{"class":257},">\n",[174,283,285,289,292,296,299,302,305,308],{"class":176,"line":284},2,[174,286,288],{"class":287},"sRxSC","import",[174,290,291],{"class":257}," {",[174,293,295],{"class":294},"ss--_"," defineRouterContext",[174,297,298],{"class":257}," }",[174,300,301],{"class":287}," from",[174,303,304],{"class":272}," '",[174,306,307],{"class":183},"@ginjou\u002Fsvelte",[174,309,310],{"class":272},"'\n",[174,312,314,316,318,321,323,325,327,329],{"class":176,"line":313},3,[174,315,288],{"class":287},[174,317,291],{"class":257},[174,319,320],{"class":294}," createRouter",[174,322,298],{"class":257},[174,324,301],{"class":287},[174,326,304],{"class":272},[174,328,126],{"class":183},[174,330,310],{"class":272},[174,332,334,336,339,342,344,346],{"class":176,"line":333},4,[174,335,288],{"class":287},[174,337,338],{"class":294}," Router ",[174,340,341],{"class":287},"from",[174,343,304],{"class":272},[174,345,134],{"class":183},[174,347,310],{"class":272},[174,349,351,353,355,358,360,362,364,367],{"class":176,"line":350},5,[174,352,288],{"class":287},[174,354,291],{"class":257},[174,356,357],{"class":294}," routes",[174,359,298],{"class":257},[174,361,301],{"class":287},[174,363,304],{"class":272},[174,365,366],{"class":183},".\u002Froutes",[174,368,310],{"class":272},[174,370,372],{"class":176,"line":371},6,[174,373,375],{"emptyLinePlaceholder":374},true,"\n",[174,377,379,383,387,391,394],{"class":176,"line":378},7,[174,380,382],{"class":381},"srJo8","const",[174,384,386],{"class":385},"s91G_"," router",[174,388,390],{"class":389},"sGXK2"," =",[174,392,320],{"class":393},"sD0ED",[174,395,396],{"class":294},"()\n",[174,398,400,403],{"class":176,"line":399},8,[174,401,402],{"class":393},"defineRouterContext",[174,404,405],{"class":294},"(router)\n",[174,407,409,412,414],{"class":176,"line":408},9,[174,410,411],{"class":257},"\u003C\u002F",[174,413,262],{"class":261},[174,415,281],{"class":257},[174,417,419],{"class":176,"line":418},10,[174,420,375],{"emptyLinePlaceholder":374},[174,422,424,426,429,431,433,437,440,443],{"class":176,"line":423},11,[174,425,258],{"class":257},[174,427,43],{"class":428},"s_MOj",[174,430,357],{"class":265},[174,432,269],{"class":257},[174,434,436],{"class":435},"sW3yT","{",[174,438,439],{"class":294},"routes",[174,441,442],{"class":435},"}",[174,444,445],{"class":257}," \u002F>\n",[121,447,448],{},"That is enough for navigation, current location, and route sync. If any page in your app blocks navigation, wire up the three pieces below as well.",[450,451,153],"h3",{"id":452},"wire-up-the-blocker",[121,454,455,457,458,460,461,463],{},[124,456,134],{}," has no global hooks. What the blocker needs is a route pre-condition and two ",[124,459,148],{}," events, and ",[124,462,148],{}," is rendered by your app, so you pass them in by hand:",[164,465,467],{"className":247,"code":466,"filename":249,"language":250,"meta":170,"style":170},"\u003Cscript lang=\"ts\">\nimport { defineRouterContext } from '@ginjou\u002Fsvelte'\nimport { createRouter } from '@ginjou\u002Fwith-svelte-spa-router'\nimport Router from 'svelte-spa-router'\nimport { routes } from '.\u002Froutes'\n\nconst router = createRouter()\ndefineRouterContext(router)\n\nconst blockableRoutes = router.withBlocker(routes)\n\u003C\u002Fscript>\n\n\u003CRouter\n    routes={blockableRoutes}\n    onRouteLoaded={router.onRouteLoaded}\n    onConditionsFailed={router.onConditionsFailed}\n\u002F>\n",[124,468,469,487,505,523,537,555,559,571,577,581,600,608,613,621,637,657,676],{"__ignoreMap":170},[174,470,471,473,475,477,479,481,483,485],{"class":176,"line":177},[174,472,258],{"class":257},[174,474,262],{"class":261},[174,476,266],{"class":265},[174,478,269],{"class":257},[174,480,273],{"class":272},[174,482,276],{"class":183},[174,484,273],{"class":272},[174,486,281],{"class":257},[174,488,489,491,493,495,497,499,501,503],{"class":176,"line":284},[174,490,288],{"class":287},[174,492,291],{"class":257},[174,494,295],{"class":294},[174,496,298],{"class":257},[174,498,301],{"class":287},[174,500,304],{"class":272},[174,502,307],{"class":183},[174,504,310],{"class":272},[174,506,507,509,511,513,515,517,519,521],{"class":176,"line":313},[174,508,288],{"class":287},[174,510,291],{"class":257},[174,512,320],{"class":294},[174,514,298],{"class":257},[174,516,301],{"class":287},[174,518,304],{"class":272},[174,520,126],{"class":183},[174,522,310],{"class":272},[174,524,525,527,529,531,533,535],{"class":176,"line":333},[174,526,288],{"class":287},[174,528,338],{"class":294},[174,530,341],{"class":287},[174,532,304],{"class":272},[174,534,134],{"class":183},[174,536,310],{"class":272},[174,538,539,541,543,545,547,549,551,553],{"class":176,"line":350},[174,540,288],{"class":287},[174,542,291],{"class":257},[174,544,357],{"class":294},[174,546,298],{"class":257},[174,548,301],{"class":287},[174,550,304],{"class":272},[174,552,366],{"class":183},[174,554,310],{"class":272},[174,556,557],{"class":176,"line":371},[174,558,375],{"emptyLinePlaceholder":374},[174,560,561,563,565,567,569],{"class":176,"line":378},[174,562,382],{"class":381},[174,564,386],{"class":385},[174,566,390],{"class":389},[174,568,320],{"class":393},[174,570,396],{"class":294},[174,572,573,575],{"class":176,"line":399},[174,574,402],{"class":393},[174,576,405],{"class":294},[174,578,579],{"class":176,"line":408},[174,580,375],{"emptyLinePlaceholder":374},[174,582,583,585,588,590,592,594,597],{"class":176,"line":418},[174,584,382],{"class":381},[174,586,587],{"class":385}," blockableRoutes",[174,589,390],{"class":389},[174,591,386],{"class":294},[174,593,135],{"class":257},[174,595,596],{"class":393},"withBlocker",[174,598,599],{"class":294},"(routes)\n",[174,601,602,604,606],{"class":176,"line":423},[174,603,411],{"class":257},[174,605,262],{"class":261},[174,607,281],{"class":257},[174,609,611],{"class":176,"line":610},12,[174,612,375],{"emptyLinePlaceholder":374},[174,614,616,618],{"class":176,"line":615},13,[174,617,258],{"class":257},[174,619,620],{"class":428},"Router\n",[174,622,624,627,629,631,634],{"class":176,"line":623},14,[174,625,626],{"class":265},"    routes",[174,628,269],{"class":257},[174,630,436],{"class":435},[174,632,633],{"class":294},"blockableRoutes",[174,635,636],{"class":435},"}\n",[174,638,640,643,645,647,650,652,655],{"class":176,"line":639},15,[174,641,642],{"class":265},"    onRouteLoaded",[174,644,269],{"class":257},[174,646,436],{"class":435},[174,648,649],{"class":294},"router",[174,651,135],{"class":257},[174,653,654],{"class":294},"onRouteLoaded",[174,656,636],{"class":435},[174,658,660,663,665,667,669,671,674],{"class":176,"line":659},16,[174,661,662],{"class":265},"    onConditionsFailed",[174,664,269],{"class":257},[174,666,436],{"class":435},[174,668,649],{"class":294},[174,670,135],{"class":257},[174,672,673],{"class":294},"onConditionsFailed",[174,675,636],{"class":435},[174,677,679],{"class":176,"line":678},17,[174,680,681],{"class":257},"\u002F>\n",[683,684,685,701],"table",{},[686,687,688],"thead",{},[689,690,691,695,698],"tr",{},[692,693,694],"th",{},"Piece",[692,696,697],{},"What it does",[692,699,700],{},"Left out",[702,703,704,717,729],"tbody",{},[689,705,706,711,714],{},[707,708,709],"td",{},[124,710,596],{},[707,712,713],{},"Adds the pre-condition that can hold a navigation.",[707,715,716],{},"Nothing ever blocks.",[689,718,719,723,726],{},[707,720,721],{},[124,722,654],{},[707,724,725],{},"Ends a navigation that reached its route.",[707,727,728],{},"An approval lingers.",[689,730,731,735,738],{},[707,732,733],{},[124,734,673],{},[707,736,737],{},"Ends a navigation one of your own route conditions rejected, and takes back the location it was heading for.",[707,739,740,741,744],{},"An approval lingers, and ",[124,742,743],{},"getLocation()"," reports a route nothing mounted.",[121,746,747,748,750],{},"Leaving them out is silent: no error, no warning, no type error. If you are upgrading an existing app, the ",[124,749,148],{}," markup is the part to revisit.",[121,752,753,754,757,758,761],{},"\"An approval lingers\" means the blocker stays ",[124,755,756],{},"proceeding"," until the next blocked navigation clears it. On the page being left that is invisible, because the page is gone by then. It shows on a blocker that outlives the navigation, such as a layout or an app shell, where any UI keyed off ",[124,759,760],{},"state !== 'unblocked'"," stays on screen.",[121,763,764,765,768,769,772],{},"Closing or reloading the tab needs no wiring. While any enabled ",[124,766,767],{},"shouldBlock"," returns ",[124,770,771],{},"true",", the browser shows its own confirmation.",[155,774,776],{"id":775},"advanced-usage","Advanced usage",[121,778,779],{},"Nothing below is required. Each part is for a case the shared contract cannot express on its own.",[121,781,782,783,786,787,789],{},"Locations from this adapter carry no ",[124,784,785],{},"meta",", because ",[124,788,134],{}," has no normalized location object to hand through.",[450,791,793],{"id":792},"custom-query-strings","Custom query strings",[121,795,796,797,800],{},"The default parser and stringifier are built on ",[124,798,799],{},"URLSearchParams",", with repeated keys collected into an array. Pass your own to match a backend that expects a different shape:",[164,802,805],{"className":803,"code":804,"language":276,"meta":170,"style":170},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark monokai","import qs from 'qs'\n\nconst router = createRouter({\n    parseQuery: search => qs.parse(search) as any,\n    stringifyQuery: query => qs.stringify(query),\n})\n",[124,806,807,823,827,843,878,902],{"__ignoreMap":170},[174,808,809,811,814,816,818,821],{"class":176,"line":177},[174,810,288],{"class":287},[174,812,813],{"class":294}," qs ",[174,815,341],{"class":287},[174,817,304],{"class":272},[174,819,820],{"class":183},"qs",[174,822,310],{"class":272},[174,824,825],{"class":176,"line":284},[174,826,375],{"emptyLinePlaceholder":374},[174,828,829,831,833,835,837,840],{"class":176,"line":313},[174,830,382],{"class":381},[174,832,386],{"class":385},[174,834,390],{"class":389},[174,836,320],{"class":393},[174,838,839],{"class":294},"(",[174,841,842],{"class":257},"{\n",[174,844,845,848,851,855,858,861,863,866,869,872,875],{"class":176,"line":333},[174,846,847],{"class":393},"    parseQuery",[174,849,850],{"class":257},":",[174,852,854],{"class":853},"sQgqH"," search",[174,856,857],{"class":381}," =>",[174,859,860],{"class":294}," qs",[174,862,135],{"class":257},[174,864,865],{"class":393},"parse",[174,867,868],{"class":294},"(search) ",[174,870,871],{"class":287},"as",[174,873,874],{"class":428}," any",[174,876,877],{"class":257},",\n",[174,879,880,883,885,888,890,892,894,897,900],{"class":176,"line":350},[174,881,882],{"class":393},"    stringifyQuery",[174,884,850],{"class":257},[174,886,887],{"class":853}," query",[174,889,857],{"class":381},[174,891,860],{"class":294},[174,893,135],{"class":257},[174,895,896],{"class":393},"stringify",[174,898,899],{"class":294},"(query)",[174,901,877],{"class":257},[174,903,904,906],{"class":176,"line":371},[174,905,442],{"class":257},[174,907,908],{"class":294},")\n",[121,910,911,914,915,918,919,922,923,135],{},[124,912,913],{},"resolve"," returns a plain path such as ",[124,916,917],{},"\u002Fposts?page=2",". Add your own ",[124,920,921],{},"#"," prefix before putting it in an ",[124,924,925],{},"\u003Ca href>",[450,927,929],{"id":928},"your-own-route-conditions","Your own route conditions",[121,931,932,934,935,938,939,942,943,135],{},[124,933,596],{}," returns a new route table with the blocker's pre-condition added to every entry. Your own table is not modified, and options on an already-wrapped route are carried over, including ",[124,936,937],{},"props",", ",[124,940,941],{},"userData",", and your own ",[124,944,945],{},"conditions",[164,947,949],{"className":803,"code":948,"language":276,"meta":170,"style":170},"import { wrap } from 'svelte-spa-router\u002Fwrap'\n\nconst routes = {\n    '\u002Fposts': PostList,\n    '\u002Fadmin': wrap({\n        component: AdminPage,\n        conditions: () => isAdmin(),\n    }),\n}\n\nconst blockableRoutes = router.withBlocker(routes)\n",[124,950,951,971,975,986,1005,1022,1035,1055,1065,1069,1073],{"__ignoreMap":170},[174,952,953,955,957,960,962,964,966,969],{"class":176,"line":177},[174,954,288],{"class":287},[174,956,291],{"class":257},[174,958,959],{"class":294}," wrap",[174,961,298],{"class":257},[174,963,301],{"class":287},[174,965,304],{"class":272},[174,967,968],{"class":183},"svelte-spa-router\u002Fwrap",[174,970,310],{"class":272},[174,972,973],{"class":176,"line":284},[174,974,375],{"emptyLinePlaceholder":374},[174,976,977,979,981,983],{"class":176,"line":313},[174,978,382],{"class":381},[174,980,357],{"class":385},[174,982,390],{"class":389},[174,984,985],{"class":257}," {\n",[174,987,988,991,995,998,1000,1003],{"class":176,"line":333},[174,989,990],{"class":272},"    '",[174,992,994],{"class":993},"sJhdN","\u002Fposts",[174,996,997],{"class":272},"'",[174,999,850],{"class":257},[174,1001,1002],{"class":294}," PostList",[174,1004,877],{"class":257},[174,1006,1007,1009,1012,1014,1016,1018,1020],{"class":176,"line":350},[174,1008,990],{"class":272},[174,1010,1011],{"class":993},"\u002Fadmin",[174,1013,997],{"class":272},[174,1015,850],{"class":257},[174,1017,959],{"class":393},[174,1019,839],{"class":294},[174,1021,842],{"class":257},[174,1023,1024,1028,1030,1033],{"class":176,"line":371},[174,1025,1027],{"class":1026},"squCx","        component",[174,1029,850],{"class":257},[174,1031,1032],{"class":294}," AdminPage",[174,1034,877],{"class":257},[174,1036,1037,1040,1042,1045,1047,1050,1053],{"class":176,"line":378},[174,1038,1039],{"class":393},"        conditions",[174,1041,850],{"class":257},[174,1043,1044],{"class":257}," ()",[174,1046,857],{"class":381},[174,1048,1049],{"class":393}," isAdmin",[174,1051,1052],{"class":294},"()",[174,1054,877],{"class":257},[174,1056,1057,1060,1063],{"class":176,"line":399},[174,1058,1059],{"class":257},"    }",[174,1061,1062],{"class":294},")",[174,1064,877],{"class":257},[174,1066,1067],{"class":176,"line":408},[174,1068,636],{"class":257},[174,1070,1071],{"class":176,"line":418},[174,1072,375],{"emptyLinePlaceholder":374},[174,1074,1075,1077,1079,1081,1083,1085,1087],{"class":176,"line":423},[174,1076,382],{"class":381},[174,1078,587],{"class":385},[174,1080,390],{"class":389},[174,1082,386],{"class":294},[174,1084,135],{"class":257},[174,1086,596],{"class":393},[174,1088,599],{"class":294},[121,1090,1091,1092,1096,1097,1099,1100,1103],{},"The blocker's condition is added ",[1093,1094,1095],"strong",{},"first",", ahead of your own. ",[124,1098,134],{}," stops at the first condition that answers ",[124,1101,1102],{},"false"," and unmounts what is on screen, so a page with unsaved work has to be asked before anything else can pull the page out from under it.",[121,1105,1106,1107,1109,1110,1112],{},"This means approving is not the same as arriving. Your ",[124,1108,1011],{}," condition can still reject a navigation the blocker already let through, which is what ",[124,1111,673],{}," is for.",[450,1114,1116],{"id":1115},"your-own-router-handlers","Your own Router handlers",[121,1118,1119,1120,1122],{},"Both handlers take ",[124,1121,134],{},"'s event detail and return nothing, so call them alongside your own:",[164,1124,1126],{"className":247,"code":1125,"language":250,"meta":170,"style":170},"\u003CRouter\n    routes={blockableRoutes}\n    onRouteLoaded={(detail) => {\n        router.onRouteLoaded(detail)\n        track(detail.location)\n    }}\n    onConditionsFailed={(detail) => {\n        router.onConditionsFailed(detail)\n        replace('\u002Flogin')\n    }}\n\u002F>\n",[124,1127,1128,1134,1146,1165,1180,1196,1202,1220,1234,1250,1256],{"__ignoreMap":170},[174,1129,1130,1132],{"class":176,"line":177},[174,1131,258],{"class":257},[174,1133,620],{"class":428},[174,1135,1136,1138,1140,1142,1144],{"class":176,"line":284},[174,1137,626],{"class":265},[174,1139,269],{"class":257},[174,1141,436],{"class":435},[174,1143,633],{"class":294},[174,1145,636],{"class":435},[174,1147,1148,1150,1152,1154,1156,1159,1161,1163],{"class":176,"line":313},[174,1149,642],{"class":265},[174,1151,269],{"class":257},[174,1153,436],{"class":435},[174,1155,839],{"class":257},[174,1157,1158],{"class":853},"detail",[174,1160,1062],{"class":257},[174,1162,857],{"class":381},[174,1164,985],{"class":257},[174,1166,1167,1170,1172,1174,1176,1178],{"class":176,"line":333},[174,1168,1169],{"class":294},"        router",[174,1171,135],{"class":257},[174,1173,654],{"class":393},[174,1175,839],{"class":1026},[174,1177,1158],{"class":294},[174,1179,908],{"class":1026},[174,1181,1182,1185,1187,1189,1191,1194],{"class":176,"line":350},[174,1183,1184],{"class":393},"        track",[174,1186,839],{"class":1026},[174,1188,1158],{"class":294},[174,1190,135],{"class":257},[174,1192,1193],{"class":294},"location",[174,1195,908],{"class":1026},[174,1197,1198,1200],{"class":176,"line":371},[174,1199,1059],{"class":257},[174,1201,636],{"class":435},[174,1203,1204,1206,1208,1210,1212,1214,1216,1218],{"class":176,"line":378},[174,1205,662],{"class":265},[174,1207,269],{"class":257},[174,1209,436],{"class":435},[174,1211,839],{"class":257},[174,1213,1158],{"class":853},[174,1215,1062],{"class":257},[174,1217,857],{"class":381},[174,1219,985],{"class":257},[174,1221,1222,1224,1226,1228,1230,1232],{"class":176,"line":399},[174,1223,1169],{"class":294},[174,1225,135],{"class":257},[174,1227,673],{"class":393},[174,1229,839],{"class":1026},[174,1231,1158],{"class":294},[174,1233,908],{"class":1026},[174,1235,1236,1239,1241,1243,1246,1248],{"class":176,"line":408},[174,1237,1238],{"class":393},"        replace",[174,1240,839],{"class":1026},[174,1242,997],{"class":272},[174,1244,1245],{"class":183},"\u002Flogin",[174,1247,997],{"class":272},[174,1249,908],{"class":1026},[174,1251,1252,1254],{"class":176,"line":418},[174,1253,1059],{"class":257},[174,1255,636],{"class":435},[174,1257,1258],{"class":176,"line":423},[174,1259,681],{"class":257},[450,1261,1263],{"id":1262},"the-current-location-is-not-the-hash","The current location is not the hash",[121,1265,1266,1267,1271,1272,1274],{},"A route pre-condition runs ",[1268,1269,1270],"em",{},"after"," the hash has changed, because that is what tells ",[124,1273,134],{}," to look for a route at all. So while a navigation is held, the hash already points at the destination while the user is still looking at the old page.",[121,1276,1277,1279,1280,1283,1284,1287],{},[124,1278,743],{}," therefore reports the last route actually taken, not ",[124,1281,1282],{},"window.location.hash",". A ",[124,1285,1286],{},"useShow"," on the page being left keeps its own record id instead of losing it while the user is still deciding.",[1289,1290,1291],"style",{},"html pre.shiki code .sR7ES, html code.shiki .sR7ES{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sLACW, html code.shiki .sLACW{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .swvn1, html code.shiki .swvn1{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .sHsBP, html code.shiki .sHsBP{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D;--shiki-sepia:#F92672}html pre.shiki code .s_lYk, html code.shiki .s_lYk{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .siCPE, html code.shiki .siCPE{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}html pre.shiki code .sRxSC, html code.shiki .sRxSC{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#F92672;--shiki-sepia-font-style:inherit}html pre.shiki code .ss--_, html code.shiki .ss--_{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .srJo8, html code.shiki .srJo8{--shiki-light:#9C3EDA;--shiki-light-font-style:inherit;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .s91G_, html code.shiki .s91G_{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .sGXK2, html code.shiki .sGXK2{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sD0ED, html code.shiki .sD0ED{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .s_MOj, html code.shiki .s_MOj{--shiki-light:#E2931D;--shiki-light-font-style:inherit;--shiki-default:#005CC5;--shiki-default-font-style:inherit;--shiki-dark:#79B8FF;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sW3yT, html code.shiki .sW3yT{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F92672}html pre.shiki code .sQgqH, html code.shiki .sQgqH{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit;--shiki-sepia:#FD971F;--shiki-sepia-font-style:italic}html pre.shiki code .sJhdN, html code.shiki .sJhdN{--shiki-light:#E53935;--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}html pre.shiki code .squCx, html code.shiki .squCx{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}",{"title":170,"searchDepth":284,"depth":284,"links":1293},[1294,1295,1298],{"id":157,"depth":284,"text":158},{"id":233,"depth":284,"text":234,"children":1296},[1297],{"id":452,"depth":313,"text":153},{"id":775,"depth":284,"text":776,"children":1299},[1300,1301,1302,1303],{"id":792,"depth":313,"text":793},{"id":928,"depth":313,"text":929},{"id":1115,"depth":313,"text":1116},{"id":1262,"depth":313,"text":1263},"Connect svelte-spa-router to Ginjou's router contract, including the three pieces the route blocker needs wired into your own Router component.","md",null,{},{"title":84,"description":1304},"ZmQsebjy8su2BGencMslxAinT2qa4G8VJ7rH4U6D7Q4",[1311,1313],{"title":80,"path":81,"stem":82,"description":1312,"children":-1},"Connect Vue Router to Ginjou's router contract, and how the route blocker behaves with nested routes, aliases, and KeepAlive.",{"title":94,"path":95,"stem":96,"description":1314,"children":-1},"Explain the fetcher mapping and auth integration in @ginjou\u002Fwith-directus.",1789837337618]