IO, the svelte-spa-Router routing package is widely used, but does not support history mode. Some of them aren’t that easy to use either, but after trying out half a dozen routes that support history, @spaceAvocado/svelte-Router is the answer.

  • Using a simple
  • feature-rich
  • History and hash are supported

I’m pretty high maintenance, too.

In trying multiple routes that support history, I encountered a problem: 404 was refreshed after switching routes. This is a common problem with single-page apps. While vue is deployed to the server to refresh 404, svelte also appears during development and wants to abandon it… Fortunately, I am one of the people who has tried the 56-78-route, and I don’t know how many ways I have tried to implement the history route. I was glad when I finally implemented the history routing using the @spaceAvocado/Svelte-Router package.

Usage:

//App.svelte
<script>
	import RouterView from '@spaceavocado/svelte-router/component/view';
	import { routes } from './router.js'
</script>

<RouterView />
Copy the code
//router.js
import createRouter from '@spaceavocado/svelte-router';
import index from './index/index.svelte';
import a from './a/a.svelte';
import b from './b/b.svelte';

export const routes = createRouter({
    mode: "HISTORY".routes: [{path: '/'.name: 'HOME'.component: index,
        },
        {
            path: '/a'.name: 'a'.component: a,
        },
        {
            path: '/b'.name: 'b'.component: b,
        },
        {
            path: The '*'.component: index,
        },
    ],
});
Copy the code
// index.svelte
<script>
	import RouterLink from '@spaceavocado/svelte-router/component/link';
</script>

<main>
	<h1>Hello {name}!</h1>
	<RouterLink to="/a">A page</RouterLink>
	<RouterLink to="/b">B page</RouterLink>
</main>
Copy the code

I accidentally tried a rollup configuration method I used with other routing packages. Sirv public -s = sirv public -s

Sirv-cli is a command line tool that provides static file services.

$ sirv --help Description Run a static file server Usage $ sirv [dir] [options] Options -D, --dev Enable "dev" mode -e, --etag Enable "ETag" header -d, --dotfiles Enable dotfile asset requests -c, --cors Enable "CORS" headers to allow any origin requestor -G, --gzip Send precompiled "*.gz" files when "gzip" is supported (default true) -B, --brotli Send precompiled "*.br" files when "brotli" is supported (default true) -m, --maxage Enable "Cache-Control" header & define its "max-age" value (sec) -i, --immutable Enable the "immutable" directive for "Cache-Control" header -k, --http2 Enable the HTTP/2 protocol. Requires node.js 8.4.0+ -c, --cert Path to certificate file for HTTP/2 server -k, Requires node.js 8.4.0+ -c, --key Path to certificate key for HTTP/2 server -P, --pass Passphrase to decrypt a certificate key -s, --single Serve as single-page application with "index.html" fallback -I, --ignores Any URL pattern(s) to ignore "index.html" assumptions -q, --quiet Disable logging to terminal -H, --host Hostname to bind (default localhost) -p, --port Port to bind (default 5000) -v, --version Displays current version -h, --help Displays this message Examples $ sirv build --cors --port 8080 $ sirv public --quiet --etag --maxage 31536000 --immutable $ sirv public --http2 --key priv.pem --cert cert.pem $ sirv public -qeim 31536000 $ sirv --port 8080 --etag $ sirv --host --devCopy the code

The function is quite rich, in which the -s parameter is dedicated to user single page application.

Summary: not afraid of difficulties, as long as willing to toss!

Original: www.yuedun.wang/blogdetail/…