@6edesign/svelte-router 中文文档教程

Question

svelte-router

一个对组件使用代码拆分的小型路由器组件。 使用 page.js (~2kb min/gzip) 进行路由。

A Work in Progress:

我还不确定这是否有用，目前还没有发布到 NPM。

How to use:

使用 Svelte v3：（

<script>
 import { Router, Route } from '6edesign/svelte-router';
</script>

<div>
  <Router>
    <!-- Route paths can be strings (exact matches or express-style named-params) or regex -->
    <!-- componentImport is a function which dynamically imports the necessary component -->
    <Route 
      path='/' 
      componentImport={() => import('./HomeRoute.svelte')} 
    />
    <Route 
      path={/\/regex-route\.(\d+)/} 
      componentImport={() => import('./RegexRoute.svelte')} 
    />
    <Route 
      path='/named/:id'
      componentImport={() => import('./NamedParamsRoute.svelte')} 
    />
 </Router>
</div>

最小）汇总配置示例：

import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";

const test = {
  input: "src/app.js",
  output: {
    sourcemap: true,
    format: "es",
    dir: 'public/module'
  },
  experimentalCodeSplitting: true, 
  plugins: [
    svelte({
      nestedTransitions: true,
      dev: false,
      css: css => {
        css.write("public/app.css");
      }
    }),
    resolve(),
    commonjs()
  ]
};

export default [test];

Contributing to this project

Clone & 安装依赖项……

cd svelte-router
npm install

……然后开始Rollup：

npm run dev