Svelte3路由

svelte目前没有提供官网路由组件，不过可以在社区中找到。本文介绍的是svelte-spa-router的使用方法。

npm i svelte-spa-router 参考以下目录结构创建文件（不是必须）

router.js:

import index from './index/index.svelte';
import a from './a/a.svelte';
import b from './b/b.svelte';

export const routes = {
    '/': index,
    '/a': a,
    '/b': b
}

动态导入组件和代码分割：

import { wrap } from 'svelte-spa-router/wrap'
import index from './index/index.svelte';

export const routes = {
    '/': index,
    '/a': wrap({
        asyncComponent: () => import('./a/a.svelte')
    }),
    // '/b': b
	// 动态加载
    '/b': wrap({
        asyncComponent: () => import('./b/b.svelte')
    }),
}

动态导入组件的优点是组件不会一起打包，而是单独的组件文件，在打开对应的页面时才会请求，可以有效减少包文件大小。 App.svelte:

<script>
	import Router from 'svelte-spa-router'
	import { routes } from './router.js'
</script>

<Router {routes} />

a.svelte:

<script>
import { link } from "svelte-spa-router";
</script>

<a href="/a" use:link>a</a>
<a href="/b" use:link>b</a>

注意：svelte-spa-router是基于hash实现，作者认为这是静态单页应用的理想实现方式，history方式的路由需要增加服务端，这增加了复杂性。

原文链接：https://www.yuedun.wang/blogdetail/5fc1f965c0ec0c27f57ac7c9