面试题：Svelte中如何在大型项目里实现基础的路由管理

Question

在Svelte大型项目中，描述使用一种流行的路由库（如svelte - routing）来设置基础路由的步骤，包括如何定义不同页面的路由以及处理路由参数。

Answer 1

1. 安装路由库：
   • 使用npm或yarn安装svelte - routing，例如npm install svelte - routing 或 yarn add svelte - routing。
2. 创建路由文件：
   • 在项目合适位置（如src/routes目录）创建路由相关文件，例如routes.js。
3. 定义基础路由：
   • 在routes.js中引入svelte - routing的相关模块，如Router和Route。
   • 定义路由数组，示例如下：

import { Router, Route } from'svelte - routing';

const routes = [
    {
        path: '/',
        component: () => import('../components/Home.svelte')
    },
    {
        path: '/about',
        component: () => import('../components/About.svelte')
    }
];

4. 在应用中使用路由：
   • 在主应用文件（如main.js或App.svelte）中引入并使用上述定义的路由。
   • 示例在App.svelte中使用：

<script>
    import { Router } from'svelte - routing';
    import { routes } from './routes.js';
</script>

<Router {routes}>
    <p>这里是路由占位符，匹配到的组件将显示在此处</p>
</Router>

5. 处理路由参数：
   • 定义带参数的路由：在routes.js的路由定义中，使用动态参数语法。例如：

{
    path: '/user/:id',
    component: () => import('../components/User.svelte')
}

- **在组件中获取参数**：在匹配的组件（如`User.svelte`）中，可以通过`svelte - routing`提供的方法获取参数。

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

    const { params } = getCurrentRoute();
    const userId = params.id;
</script>

<p>用户ID为: {userId}</p>