面试题：SvelteKit路由与状态管理的基础结合应用

Question

在SvelteKit项目中，简述如何利用SvelteKit的路由系统结合Svelte的状态管理实现一个简单的页面导航栏，导航栏需要根据当前页面状态显示不同样式。请说明关键步骤和代码示例。

Answer 1

关键步骤

1. 设置路由：在SvelteKit项目中，src/routes目录下的文件结构决定了路由。例如，创建不同页面的.svelte文件，如src/routes/home.svelte，src/routes/about.svelte等。
2. 创建导航栏组件：在src/lib目录（可自行创建）下创建导航栏组件，比如Navigation.svelte。在组件中使用Svelte的响应式变量来存储当前页面状态。
3. 状态管理：利用Svelte的响应式原理来管理导航栏样式状态。可以通过$:符号定义响应式变量，当相关变量变化时，自动更新样式。
4. 关联路由与状态：在导航栏组件中，根据当前路由信息更新状态变量，从而实现根据不同页面显示不同样式。

代码示例

1. 导航栏组件 Navigation.svelte

<script>
    import { page } from '$app/stores';
    import { onMount } from'svelte';
    let currentPage = '';
    onMount(() => {
        page.subscribe((p) => {
            currentPage = p.pathname;
        });
    });
</script>

<nav>
    <a href="/" class={currentPage === '/'? 'active' : ''}>Home</a>
    <a href="/about" class={currentPage === '/about'? 'active' : ''}>About</a>
</nav>

<style>
   .active {
        color: blue;
        text-decoration: underline;
    }
</style>

2. 在页面中使用导航栏 假设在src/routes/home.svelte中：

<script>
    import Navigation from '$lib/Navigation.svelte';
</script>

<Navigation />

<h1>Home Page</h1>

同样，在src/routes/about.svelte中：

<script>
    import Navigation from '$lib/Navigation.svelte';
</script>

<Navigation />

<h1>About Page</h1>

在上述代码中，Navigation.svelte组件通过订阅$page存储来获取当前路由信息，从而根据当前页面路径更新currentPage变量。在导航栏的链接中，根据currentPage来添加不同的样式类，实现根据当前页面状态显示不同样式。在页面组件中引入导航栏组件，即可完成页面导航栏的展示。