如何安装svelte_如何在svelte中创建路由器

如何安装svelte

斯威特(SVELTE)

In Single Page Applications, for example when we are using a JavaScript framework (as our beloved Svelte), we need to provide a method for our users to navigate between sections of the website as they need.

例如，在单页应用程序中，当我们使用JavaScript框架(如我们钟爱的Svelte)时，我们需要为用户提供一种在他们需要的网站部分之间导航的方法。

Since in SPA all the web page requests are redirected to the root page, we need to simulate the “standard” way of navigating pages. This is where routing libraries help us, and although it seems like a complicated task to reproduce, its base functionality is very simple and can be done in few lines of code.

由于在SPA中，所有网页请求都被重定向到根页面，因此我们需要模拟“标准”的页面导航方式。 这是路由库为我们提供帮助的地方，尽管复制似乎很复杂，但它的基本功能非常简单，可以用几行代码完成。

At the end of the article, we can use our own router, maybe for our next project.

在本文的结尾，我们可以使用自己的路由器，也许用于下一个项目。

为什么要实施自定义路由器 (Why to implement a custom router)

• We don’t need all the functions of our current router package. The bundle size of an SPA is one of the most important things to consider, because the performance is directly proportional to the time it takes for the user to download the necessary scripts.

  我们不需要当前路由器包的所有功能。 SPA的捆绑包大小是要考虑的最重要的事情之一，因为性能与用户下载必要脚本所花费的时间成正比。

• We can customize the router functionality to adapt to your needs. Maybe we want to add some transitions between pages, or trigger a function when the page changes, well… We have the control of the code, and we are writing our opinionated rules.

  我们可以自定义路由器功能以适应您的需求。 也许我们想在页面之间添加一些过渡，或者在页面更改时触发一个函数，好吧……我们拥有代码的控制权，并且我们正在编写我们自以为是的规则。

• We can learn new Javascript skills. In this article, for example, we will use the HTML5 History API, a native API to interact with browser’s history. You will be amazed by how many possibilities there are.

  我们可以学习新的Javascript技能。 例如，在本文中，我们将使用HTML5 History API (原生API)与浏览器的历史记录进行交互。 您会惊讶于有无数种可能性。

路由器如何运作 (How routers work)

Let’s start learning how our favourite routers work. For example, let’s take the svelte-routing npm package.

让我们开始学习我们最喜欢的路由器如何工作。 例如，让我们采用svelte-routing npm软件包。

<Router {url}>
    <Route path="blog/:id" component={Post}/>
    <Route path="blog" component={Blog}/>
    <Route path="about" component={About}/>
    <Route path="/" component={Home} />
</Router><script>
  import {Router, Route} from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";
  import Blog from "./routes/Blog.svelte";
  import Post from "./routes/Post.svelte";  export let url = "";
</script>