Svelte 路由基础

在实际的Web应用中，我们经常需要处理页面间的跳转和状态管理。为了实现这一目标，Svelte 提供了 svelte-routing 库来帮助开发者轻松地创建单页应用（SPA）。本章将介绍如何使用 svelte-routing 来设置基本的路由，并通过一些示例来展示其工作原理。

安装 svelte-routing

首先，我们需要安装 svelte-routing。可以通过 npm 或 yarn 来完成安装：

npm install svelte-routing

或者

yarn add svelte-routing

引入 Router 和 Route 组件

在 Svelte 中使用路由，我们需要引入两个主要组件：Router 和 Route。Router 组件负责监听 URL 的变化，并根据当前 URL 来渲染相应的组件；而 Route 组件则定义了不同路径与组件之间的映射关系。

假设我们有一个简单的应用结构如下：

<script>
  import { Router, Route } from 'svelte-routing';
</script>

<Router>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

在这个例子中，当用户访问网站根目录时，会显示 Home 组件的内容；而当访问 /about 路径时，则会显示 About 组件的内容。

使用 Link 组件进行导航

为了使用户能够方便地从一个页面跳转到另一个页面，我们可以使用 Link 组件来创建导航链接。这不仅可以让用户点击链接进行页面跳转，还能保持良好的用户体验，比如高亮显示当前选中的页面等。

<script>
  import { Link } from 'svelte-routing';
</script>

<nav>
  <Link href="/">首页</Link>
  <Link href="/about">关于我们</Link>
</nav>

这样设置后，用户就可以通过点击“首页”或“关于我们”链接来在不同的页面之间切换了。

动态路由

除了静态路径外，Svelte 路由还支持动态路由，允许我们在 URL 中包含变量部分，以便于根据不同的参数显示不同的内容。例如，如果我们想要显示某个用户的个人信息，可以这样做：

<Route path="/user/:id" component={UserProfile} />

这里，:id 是一个动态段，表示用户 ID。在 UserProfile 组件内部，我们可以通过 this.params 获取到具体的 ID 值：

export let params;

$: id = params.id;

然后可以根据这个 id 值来加载特定用户的数据并显示。

嵌套路由

有时候，我们的应用可能需要更复杂的页面结构，这时候嵌套路由就派上用场了。嵌套路由允许我们在一个父路由下定义多个子路由，从而构建出层次化的页面结构。

<Route path="/" component={MainLayout}>
  <Route path="home" component={Home} />
  <Route path="about" component={About} />
  <Route path="profile" component={Profile}>
    <Route path="edit" component={EditProfile} />
  </Route>
</Route>

在这个例子中，MainLayout 是一个父路由，它包含了三个子路由：home、about 和 profile。其中，profile 又包含了一个子路由 edit。

通过以上这些基本概念的学习，你已经掌握了如何使用 Svelte 创建简单的路由功能。当然，Svelte 路由还有更多高级特性等待着你去探索，比如重定向、错误处理等等。希望你在实际项目中能灵活运用这些知识，打造出更加丰富、友好的 Web 应用！