\n
Configuration - Before Enter Function
\n
\n The beforeEnter option sets an array of functions or just a function\n that must be executed for before each route if the option\n ignoreGlobalBeforeFunction\n isn't set in the route definition object.\n
\n
\n The default order of execution is first execute all Global Before Functions and\n then execute route object before enter functions. But for a particular route\n the behaviour maybe different. Maybe it is needed to execute the route before\n function before Global Before Functions.\n
\n
\n If that is the case then you can set in the route object the option\n executeRouteBEFBeforeGlobalBEF to true. When this option is enabled\n in the route definition object the default order of execution is overrided\n and executes route object before functions before Global Before Functions.\n
\n
\n See the \n Route Object Properties\n for more info.\n
\n
\n See the next example of how to set this option:\n
\n
\n// importing the SCR - The configuration store\nimport { SCR_CONFIG_STORE } from \"svelte-client-router\"\n\n// ------ SETTING A FUNCTION ------ \n// Setting Global Before Enter Function\nSCR_CONFIG_STORE.setBeforeEnter((resolve) => { resolve(true); });\n\n// OR \n\n// ------ SETTING AN ARRAY OF FUNCTIONS ------ \n// Setting Global Before Enter Functions\n// You can set as many Before Enter Functions as you want!\nSCR_CONFIG_STORE.setBeforeEnter([\n (resolve) => { resolve(true); },\n (resolve) => { resolve(true); },\n (resolve) => { resolve(true); },\n]);\n \n
\n \n \n The configuration for this route.\n \n \n{\n name: \"configurationGlobalBeforeEnterOptionRoute\",\n path: \"/svelte-client-router/configurationBeforeEnter\",\n lazyLoadComponent: () => import(\"./docs/pages/SCR_ConfigurationBeforeEnter.svelte\"),\n title: \"SCR - Configuration - Before Enter\",\n}\n\n \n \n \n\n
Configuration - On Error Function
\n
\n The onError option sets a function that is going to be executed for\n any route when something goes wrong.\n
\n
\n When that happens the natural behaviour is to open the error page. In this context\n SCR has a very basic error component that comes with it. You can of course set\n you own error component and it is encouraged to do so.\n
\n See the \n Route Component Components\n for more info.\n
\n
\n// importing the SCR - The configuration store\nimport { SCR_CONFIG_STORE } from \"svelte-client-router\"\n\n// Setting Global On Error Function\nSCR_CONFIG_STORE.setOnError((err, routeObjParams) => { console.error(err) });\n \n
\n \n \n \n So that is it for this section. This feature enables us to handle any errors\n that may occur inside our routing definitions.\n
\n \n The configuration for this route.\n \n \n{\n name: \"configurationOnErrorOptionRoute\",\n path: \"/svelte-client-router/configurationOnError\",\n lazyLoadComponent: () => import(\"./docs/pages/SCR_ConfigurationOnError.svelte\"),\n title: \"SCR - Configuration - On Error\",\n}\n\n \n \n \n\n
Route Object - Before Enter Functions
\n
\n The beforeEnter option sets an array of functions or just a function\n that must be executed for before each route if the option\n ignoreGlobalBeforeFunction\n isn't set in the route definition object.\n
\n
\n The default order of execution is first execute all Global Before Functions and\n then execute route object before enter functions. But for a particular route\n the behaviour maybe different. Maybe it is needed to execute the route before\n function before Global Before Functions.\n
\n
\n If that is the case then you can set in the route object the option\n executeRouteBEFBeforeGlobalBEF to true. When this option is enabled\n in the route definition object the default order of execution is overrided\n and executes route object before functions before Global Before Functions.\n
\n
\n See the \n Route Object Properties\n for more info.\n
\n
\n See the next example of how to set this option:\n
\n
\n// ------ SETTING A FUNCTION ------ \n// Setting Route Before Enter Function\n{\n beforeEnter((resolve) => { resolve(true); });\n}\n// OR \n\n// ------ SETTING AN ARRAY OF FUNCTIONS ------ \n// Setting Route Before Enter Functions\n// You can set as many Before Enter Functions as you want!\n{\n beforeEnter([\n (resolve) => { resolve(true); },\n (resolve) => { resolve(true); },\n (resolve) => { resolve(true); },\n ]);\n}\n \n \n\n \n The configuration for this route.\n \n \n{\n name: \"routeObjectBeforeEnterRoute\",\n path: \"/svelte-client-router/routeObjectBeforeEnter\",\n lazyLoadComponent: () => import(\"./docs/pages/SCR_RouteObjectBeforeEnter.svelte\"),\n title: \"SCR - Route Object - Before Enter Functions\",\n}\n\n \n \n \n\n
Route Object - On Error Function
\n
\n The onError option sets a function that is going to be executed for\n the specific route when something goes wrong.\n
\n
\n When that happens the natural behaviour is to open the error page. In this context\n SCR has a very basic error component that comes with it. You can of course set\n you own error component and it is encouraged to do so.\n
\n See the \n Route Component Components\n for more info.\n
\n
\n\n// Setting Route On Error Function\n}\n onError((err, routeObjParams) => { console.error(err) });\n{\n \n
\n \n\n \n So that is it for this section. This feature enables us to handle any errors\n that may occur inside this specific route definition.\n
\n \n The configuration for this route.\n \n \n{\n name: \"routeObjectOnErrorRoute\",\n path: \"/svelte-client-router/routeObjectOnError\",\n lazyLoadComponent: () => import(\"./docs/pages/SCR_RouteObjectOnError.svelte\"),\n title: \"SCR - Route Object - On Error Function\",\n}\n\n \n \n \n\n
Route Component - Properties
\n
\n The route component is a Svelte Component\n , so it can receive parameters to pass further. Some of these parameters are\n \n components - that can be check in the next section -, and some are crucial for it to work correctly.\n \n
\n
\n\n Lets see these parameters that aren't components:\n
\n
\n\n// Importing the router component\nimport { SCR_ROUTER_COMPONENT } from \"svelte-client-router\"\nimport SCR_Layout from \"../testComponents/SCR_Layout.svelte\";\nimport SCR_Loading from \"../testComponents/SCR_LoadingComponent.svelte\";\nimport SCR_Error from \"../testComponents/SCR_Error.svelte\";\nimport SCR_NotFound from \"../testComponents/SCR_NotFound.svelte\";\n\n// Define the router object array\nconst routes = [\n {\n ... // Your routes definitions\n }\n]\n\n// Example of usage\n<SCR_ROUTER_COMPONENT \n bind:routes \n defaultLayoutComponent={SCR_Layout}\n notFoundComponent={SCR_NotFound}\n errorComponent={SCR_Error}\n loadingComponent={SCR_Loading}\n allProps={... // Passing parameters to be available in and routes and all components }\n allLoadingProps={... // Passing parameters to be available in and routes in loading component }\n/>\n\n \n
\n Routes
\n \n This is where you declare all your routes. It is the index of your\n application. It has several options that you can configure.\n
\n For more information see the \n route object properties section.\n \n
\n
\n Lets check out a complete example of declaration with all possible options:\n
\n \n\n// Setting Route Object Definition Example\nconst routes = [\n {\n name: \"routeName1\",\n path: \"/test1\",\n component: SCR_C1,\n\n // This property has preference over component property\n lazyLoadComponent: () =>\n import(\"./docs/pages/SCR_RouteComponentProperties.svelte\"),\n layout: SCR_Layout,\n\n // This property has preference over layout property\n lazyLoadLayoutComponent: () =>\n import(\"./docs/SCR_Layout.svelte\"),\n ignoreLayout: false,\n ignoreScroll: false,\n scrollProps: {\n top: 0,\n left: 0,\n behavior: \"smooth\",\n timeout: 10, // timeout must be greater than 10 milliseconds\n },\n title: \"First Route Title\",\n params: { myCustomParam: \"text param!\", }\n loadingProps: { textLoading: \"Loading this route...\", }\n ignoreGlobalBeforeFunction: false,\n executeRouteBEFBeforeGlobalBEF: false,\n forceReload: false,\n afterBeforeEnter: (routeObjParams) => console.log(routeObjParams)\n beforeEnter: [\n (resolve, routeFrom, routeTo, routeObjParams, payload) => resolve(true),\n (resolve, routeFrom, routeTo, routeObjParams, payload) => resolve(true),\n (resolve, routeFrom, routeTo, routeObjParams, payload) => resolve(true),\n ],\n onError: (err, routeObjParams) => console.error(err)\n },\n]\n \n \n Each route defined inside the route array object can have these options.\n Very robust and we can see that SCR is focused on before enter behaviour.\n
\n
\n All Props
\n \n The allProps option can be passed to the router component. It must be\n an object with all the properties that you want to deliver to every route and\n component. This property will be made available everywhere.\n
\n \n\n// Example\nconst allProps = {\n passToAll: \"OK\"\n}\n \n
\n All Loading Props
\n \n The allLoadingProps option can be passed to the router component. It must\n be an object with all the properties that you want to deliver to every route\n when loading the component.\n
\n \n\n// Example\nconst allLoadingProps = {\n passToAll: \"OK\"\n}\n \n \n Now that we saw the basic properties of the component. In the next section\n we will explore the SCR component components properties.\n
\n \n The configuration for this route.\n \n \n{\n name: \"routeComponentPropertiesRoute\",\n path: \"/svelte-client-router/routeComponentProperties\",\n lazyLoadComponent: () =>\n import(\"./docs/pages/SCR_RouteComponentProperties.svelte\"),\n title: \"SCR - Route Component - Properties\",\n}\n\n \n \n \n