面试题：SvelteKit路由模块化开发基础

Question

在SvelteKit中，如何创建一个基本的路由模块化结构？请举例说明如何在不同的模块中定义路由，并实现简单的页面跳转。

Answer 1

1. 创建基本路由模块化结构：
   • 在SvelteKit项目中，路由基于文件系统。src/routes目录下的文件和目录结构决定了应用的路由。
   • 例如，在src/routes目录下创建不同的文件夹来代表不同的模块。假设我们有一个admin模块和一个user模块。
   • 我们可以这样组织目录：

src/
  routes/
    admin/
      index.svelte
      dashboard.svelte
    user/
      index.svelte
      profile.svelte
    index.svelte

2. 在不同模块中定义路由：
   • admin/index.svelte：

<script>
  // 这里可以写组件逻辑
</script>

<h1>Admin Home</h1>

• admin/dashboard.svelte：

<script>
  // 这里可以写组件逻辑
</script>

<h1>Admin Dashboard</h1>

• user/index.svelte：

<script>
  // 这里可以写组件逻辑
</script>

<h1>User Home</h1>

• user/profile.svelte：

<script>
  // 这里可以写组件逻辑
</script>

<h1>User Profile</h1>

3. 实现简单的页面跳转：
   • 在SvelteKit中，可以使用<a>标签来实现页面跳转。
   • 例如，在admin/index.svelte中添加跳转到admin/dashboard.svelte的链接：

<script>
  // 这里可以写组件逻辑
</script>

<h1>Admin Home</h1>
<a href="/admin/dashboard">Go to Admin Dashboard</a>

• 在user/index.svelte中添加跳转到user/profile.svelte的链接：

<script>
  // 这里可以写组件逻辑
</script>

<h1>User Home</h1>
<a href="/user/profile">Go to User Profile</a>

• 也可以使用$app/navigation中的goto函数来实现编程式导航。例如，在admin/index.svelte中：

<script>
  import { goto } from '$app/navigation';
  const goToDashboard = () => {
    goto('/admin/dashboard');
  };
</script>

<h1>Admin Home</h1>
<button on:click={goToDashboard}>Go to Admin Dashboard</button>