使用routify路由

.routify/components/[...404].svelte

@@ -0,0 +1,68 @@
+<script context="module">
+    export const load = ({ route }) => ({
+        status: 404,
+        error: '[Routify] Page could not be found.',
+        props: { url: route.url },
+    })
+
+    const isDev = import.meta.env?.DEV
+</script>
+
+<script>
+    export let url
+</script>
+
+<!-- routify:meta inline=false -->
+
+<!-- This file was created by Routify.
+     To customize the error page, create a catchall page 
+     in the root of your project. Eg. [...404].svelte -->
+<div class="four04">
+    <h1>404 - Page Not Found</h1>
+    <p>
+        The page <code>{url}</code> could not be found. Please check the URL or go back to
+        the <a href="/">homepage</a>.
+    </p>
+    {#if isDev}
+        <div>
+            <h5>Dev note:</h5>
+            <ul>
+                <li>
+                    To customize this page, create a
+                    <code>[...404].svelte</code> file in the root of your project.
+                </li>
+                <li>
+                    You can copy this file from <code
+                        >.routify/components/[...404].svelte</code
+                    >.
+                </li>
+                <li>
+                    Custom 404 files can be created at any level of your project. For
+                    example, in <code>src/pages/blog/[...404].svelte</code>.
+                </li>
+            </ul>
+        </div>
+    {/if}
+</div>
+
+<style>
+    div {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+    }
+    div.four04 > * {
+        margin-top: 1em;
+    }
+
+    ul {
+        padding: 0;
+    }
+    ul li {
+        opacity: 75%;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+</style>

.routify/instance.default.js

@@ -0,0 +1,7 @@
+import { Router, createRouter } from '@roxi/routify'
+import routes from './routes.default.js'
+
+// remove previous routers to avoid bumping router names (/path => /1/path)
+globalThis.__routify.reset()
+export const router = createRouter({routes})
+export { Router, routes }

.routify/render.js

@@ -0,0 +1,6 @@
+
+        import * as module from '../src/App.svelte'
+        import { renderModule } from '@roxi/routify/tools/ssr5.js'
+        import { map } from './route-map.js'
+
+        export const render = url => renderModule(module, { url, routesMap: map })

.routify/route-map.js

@@ -0,0 +1,4 @@
+
+export const map = {
+    'default': () => import('./routes.default.js').then(m => m.default) 
+}

.routify/routes.default.js

@@ -0,0 +1,144 @@
+// @ts-nocheck
+
+
+export const routes = {
+  "meta": {},
+  "id": "_default",
+  "name": "",
+  "file": {
+    "path": "src/routes/_module.svelte",
+    "dir": "src/routes",
+    "base": "_module.svelte",
+    "ext": ".svelte",
+    "name": "_module"
+  },
+  "asyncModule": () => import('../src/routes/_module.svelte'),
+  "rootName": "default",
+  "routifyDir": import.meta.url,
+  "children": [
+    {
+      "meta": {
+        "dynamic": true,
+        "order": false,
+        "dynamicSpread": true,
+        "hideInMenu": true
+      },
+      "id": "_default_____404__svelte",
+      "name": "[...404]",
+      "file": {
+        "path": "src/routes/[...404].svelte",
+        "dir": "src/routes",
+        "base": "[...404].svelte",
+        "ext": ".svelte",
+        "name": "[...404]"
+      },
+      "asyncModule": () => import('../src/routes/[...404].svelte'),
+      "children": []
+    },
+    {
+      "meta": {
+        "isDefault": true,
+        "title": "主页",
+        "redirect": "/login"
+      },
+      "id": "_default_index_svelte",
+      "name": "index",
+      "file": {
+        "path": "src/routes/index.svelte",
+        "dir": "src/routes",
+        "base": "index.svelte",
+        "ext": ".svelte",
+        "name": "index"
+      },
+      "asyncModule": () => import('../src/routes/index.svelte'),
+      "children": []
+    },
+    {
+      "meta": {},
+      "id": "_default_login",
+      "name": "login",
+      "module": false,
+      "file": {
+        "path": "src/routes/login",
+        "dir": "src/routes",
+        "base": "login",
+        "ext": "",
+        "name": "login"
+      },
+      "children": [
+        {
+          "meta": {
+            "isDefault": true,
+            "title": "登录页面",
+            "hideInMenu": true,
+            "reset": true
+          },
+          "id": "_default_login_index_svelte",
+          "name": "index",
+          "file": {
+            "path": "src/routes/login/index.svelte",
+            "dir": "src/routes/login",
+            "base": "index.svelte",
+            "ext": ".svelte",
+            "name": "index"
+          },
+          "asyncModule": () => import('../src/routes/login/index.svelte'),
+          "children": []
+        }
+      ]
+    },
+    {
+      "meta": {
+        "title": "订单管理"
+      },
+      "id": "_default_orders",
+      "name": "orders",
+      "file": {
+        "path": "src/routes/orders/_module.svelte",
+        "dir": "src/routes/orders",
+        "base": "_module.svelte",
+        "ext": ".svelte",
+        "name": "_module"
+      },
+      "asyncModule": () => import('../src/routes/orders/_module.svelte'),
+      "children": [
+        {
+          "meta": {
+            "isDefault": true,
+            "title": "订单管理",
+            "auth": "SF_XXX_2"
+          },
+          "id": "_default_orders_index_svelte",
+          "name": "index",
+          "file": {
+            "path": "src/routes/orders/index.svelte",
+            "dir": "src/routes/orders",
+            "base": "index.svelte",
+            "ext": ".svelte",
+            "name": "index"
+          },
+          "asyncModule": () => import('../src/routes/orders/index.svelte'),
+          "children": []
+        },
+        {
+          "meta": {
+            "title": "销售订单",
+            "auth": "SF_XXX_SAle"
+          },
+          "id": "_default_orders_sale_svelte",
+          "name": "sale",
+          "file": {
+            "path": "src/routes/orders/sale.svelte",
+            "dir": "src/routes/orders",
+            "base": "sale.svelte",
+            "ext": ".svelte",
+            "name": "sale"
+          },
+          "asyncModule": () => import('../src/routes/orders/sale.svelte'),
+          "children": []
+        }
+      ]
+    }
+  ]
+}
+export default routes

.routify/routify-init.js

@@ -0,0 +1,18 @@
+
+import { appInstance, preloadUrl } from '@roxi/routify'
+import { map } from './route-map.js'
+
+appInstance.routeMaps = map
+
+// We need to import the App module since a router is likely declared here. This saves us pre-creating the router in the preload step below.
+import * as module from '../src/App.svelte'
+
+const preloadPromise = Promise.all([
+    module.load?.(),
+    // PreloadUrl parses the url and preloads each url chunk in a router that matches its name. So for '/hello;widget=/world',
+    // it will preload '/hello' in the default router and '/world' in the 'widget' router.
+    // If the respective routers don't exist, preloadUrl will use routesMap to pre-create a router and match it with the url chunk.
+    preloadUrl({ routesMap: map })
+])
+
+export const app = preloadPromise.then(() => import('../src/main.js'))