Pixelstrap - Admin Document

Routing in Svelte

One core feature of Svelte is the file system router. Every Vue file inside the pages/ directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Svelte leverages code-splitting to ship the minimum amount of JavaScript for the requested route.

Installation Page

Svelte routing is based on vue-router and generates the routes from every component created in the pages/ directory, based on their filename. This file system routing uses naming conventions to create dynamic and nested routes:

npm i page

LayoutRouter.svelte

<script>
    import router from 'page';
    import { userName } from '../store';
    import routes from './LayoutRoutes';
    import { useLocation } from 'svelte-navigator';
    let page = null;
    let params = {};
    let location = useLocation()
    let username;
    userName.subscribe((value) => {
        username = value;
    });
    
    // routes file 
    { path: `/dashboard/default`, component: DefaultDashboard },
    { path: `/dashboard/ecommerce`, component: Ecommerce },
    { path: `/dashboard/onlinecource`, component:OnlineCourse},
    { path: `/dashboard/crypto`, component:Crypto},
    { path: `/dashboard/social`, component:Social},
    { path: '/dashboard/pos', component:POS},
    { path: '/dashboard/schoolmanagement', component:SchoolManagement },
    { path: '/dashboard/nft', component: NFT }

    routes.forEach((route) => {
        router(
        route.path,
        (ctx, next) => {
            params = { ...ctx.params };
            next();
        },
        () => {
            if (username === null) {
            router.redirect('/login');
            } else {
            page = route.component;
            }
        },
        );
    });
    
    router.start();
    if ((window.location.pathname === '/' || window.location.pathname === '/dashboard/default') && userName !== null) {
        if($location.search == ""){
        router.redirect("/dashboard/default")
        }else{
        router.redirect("/dashboard/default" + $location.search)
        }
    }
</script>
                          
<svelte:component this={page} {params} />
   // For taking the change on window.location.pathname
<svelte:window />

App.svelte

   
<script>
    import { Router } from 'svelte-navigator';
    import Layout from './Layout/Layout.svelte';
    import LayoutRouter from './Routes/LayoutRouter.svelte';
    import { isDarkMode, userName } from './store';
    import AuthRouter from './Routes/AuthRouter.svelte';
    import AuthRoutes from './Routes/AuthRoutes';
    var isAuthRoute = false;
    let darkMode;
    let username;

    isDarkMode.subscribe((value) => {
        darkMode = value;
    });
    $: darkMode ? document.body.classList.add("dark-only") : document.body.classList.remove("dark-only");

    $: AuthRoutes.map((item) => {
        if (item.path === window.location.pathname) {
            isAuthRoute = true;
            return false;
        }
        });

    userName.subscribe((value) => {
        username = value;
    });
</script>


<Router>
    <main>
        {#if username !== null && !isAuthRoute}
            <Layout>
                <LayoutRouter />
            </Layout>
            {:else}
            <AuthRouter />
        {/if}
    </main>
</Router>
<style lang="scss" global>
    @import './global.scss';
</style>