svelte history路由刷新后404
npms.io上搜索到svelte的route包其实也不算少,使用比较广泛的svelte-spa-router
路由包却不支持history模式。有些支持history模式的使用上也不是很方便,试用过五六个支持history的路由后最终@spaceavocado/svelte-router
算是满足了要求。
- 使用简单
- 功能丰富
- 支持history和hash 我也是够难伺候的。
在试用了多个支持history的路由过程中,都遇到了一个问题:切换路由后刷新404。这也算是单页应用的通病了。不过像vue这种是在部署到服务器上刷新404,而svelte却在开发过程中也出现了,又想放弃了…
好在我也是试用过五六七八个路由的人了,中间不知道尝试过多少种方法来实现history路由。最后使用@spaceavocado/svelte-router
包实现了history路由的时候我还是满心欢喜。
使用方法:
//App.svelte
<script>
import RouterView from '@spaceavocado/svelte-router/component/view';
import { routes } from './router.js'
</script>
<RouterView />
//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: '*',
component: index,
},
],
});
// index.svelte
<script>
import RouterLink from '@spaceavocado/svelte-router/component/link';
</script>
<main>
<h1>Hello {name}!</h1>
<RouterLink to="/a">a页面</RouterLink>
<RouterLink to="/b">b页面</RouterLink>
</main>
可是一刷新就嗝屁了,依旧出现404.无意中就试了一下之前使用其他路由包使用的一种rollup配置方法。
package.json中的start命令:
sirv public -s
加了-s
参数就好了。
sirv-cli
是一个提供静态文件服务命令行工具。
$ 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, --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 --dev
功能还是蛮丰富的,其中-s
参数是专门用户单页应用的。
总结:不怕困难多,只要肯折腾!