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参数就好了。


额,希望苹果能给我广告费!







