Svelte中如何让嵌套路由复用同一模板？

完全可行，有两种简单的实现方式满足你的需求：

方式一：直接复用父路由组件 #

在子路由的+page.svelte文件中，导入并渲染父路由的页面组件，同时可以传递当前路由的参数和数据：

<!-- /src/routes/[foo]/[bar]/+page.svelte -->
<script>
  import ParentPage from '../+page.svelte';
  // 传递当前路由的参数与数据给父组件
  export let params;
  export let data;
</script>

<ParentPage {params} {data} />

这种方式最直接，子路由会完全复用父路由的模板，你可以在父组件中通过接收的params来处理bar参数相关的逻辑。

方式二：使用路由重定向 #

如果不需要保留子路由的URL路径，可以通过重定向让子路由指向父路由，同时携带必要参数：

// /src/routes/[foo]/[bar]/+page.js
export function load({ params }) {
  // 重定向到父路由，并将bar参数作为查询参数传递
  return {
    status: 307,
    redirect: `/${params.foo}?bar=${params.bar}`
  };
}

用户访问/foo/bar时会被重定向到/foo?bar=bar，父路由可以通过url.searchParams.get('bar')获取该参数进行逻辑处理。

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