Svelte博客路由传参及嵌套路由配置问题求助

问题1：访问blog/article/1时title和description显示undefined #

这大概率是路由参数没正确获取或者数据匹配出错，按你用的路由方案对应处理：

• 如果是SvelteKit：确保文章路由路径为src/routes/blog/article/[id]/+page.svelte，在同级的+page.js里通过params.id拿文章ID，从数据源匹配对应内容：

  // src/routes/blog/article/[id]/+page.js
  export async function load({ params }) {
    // 模拟文章数据源，实际可替换为API请求
    const articles = [
      { id: '1', title: '第一篇博客', description: '这是我的第一篇测试文章' },
      { id: '2', title: '第二篇博客', description: '这是我的第二篇测试文章' }
    ];
    const article = articles.find(item => item.id === params.id);
    return { article };
  }
  

  然后在article.svelte里接收数据：

  <script>
    export let data;
    const { article } = data;
  </script>
  
  <h1>{article.title}</h1>
  <p>{article.description}</p>
  

• 如果用第三方路由库（比如svelte-router-spa）：在article.svelte里通过useParams()获取ID，再匹配数据：

  <script>
    import { useParams } from 'svelte-router-spa';
    const params = useParams();
    const articles = [/* 你的文章数据 */];
    const article = articles.find(item => item.id === params.id);
  </script>
  

  重点检查：数据源里是否存在id=1的条目，匹配逻辑有没有写错。

问题2：向文章路由传递数据 #

常用两种靠谱方案：

1. 路由参数传递（推荐）：就是上面问题1的做法，通过URL里的ID参数，在目标组件里从全局数据源（数组、后端API等）获取对应数据，URL清晰且支持刷新。
2. 路由state传参：不想把ID暴露在URL里时用，通过Link组件的state属性传数据：

   <!-- blog.svelte里的跳转链接 -->
   <Link to="/blog/article/1" state={{ title: '第一篇博客', description: '测试描述内容' }}>
     查看第一篇文章
   </Link>
   

   然后在article.svelte里读取state：

   <script>
     import { useLocation } from 'svelte-router-spa';
     const location = useLocation();
     const { title, description } = location.state || {};
   </script>
   

问题3：文章路由的正确声明方式 #

文章路由不能直接在blog.svelte里声明，要按路由规则配置：

• 如果是SvelteKit：用文件系统路由，直接创建src/routes/blog/article/[id]/+page.svelte，自动成为/blog的子路由，无需额外配置。
• 如果用第三方路由库：要在全局路由配置里定义嵌套路由，同时在blog.svelte里添加子路由渲染出口：

  // 全局路由配置文件（比如router.js）
  import { Router } from 'svelte-router-spa';
  import Home from './Home.svelte';
  import Blog from './Blog.svelte';
  import Article from './Article.svelte';
  
  const routes = [
    { path: '/', component: Home },
    { 
      path: '/blog', 
      component: Blog,
      children: [
        { path: 'article/:id', component: Article } // 配置子路由
      ]
    }
  ];
  
  export const router = new Router({ routes });
  

  然后在blog.svelte里加<RouterView />渲染文章组件：

  <script>
    import { RouterView } from 'svelte-router-spa';
  </script>
  
  <h2>博客列表</h2>
  <!-- 你的博客列表内容 -->
  <RouterView /> <!-- 文章组件会在这里渲染 -->
  

  之前无法加载路由，就是因为没配置嵌套路由或者没加渲染出口。

内容的提问来源于stack exchange，提问作者Linesofcode