因此我一直致力于在我的 sveltekit webapp 中实现面包屑功能。
- 我们的想法是,面包屑将在最顶部的layout.svelte中呈现。
- 然后,后续的后代会以某种方式将其自身的面包屑数据传递给父代。
- 当我在某处有 [...] 休息] 路线时这很有用。
- 我设法让它工作了。但我觉得可能有更好的方法来解决这个问题。
- 工作示例 -> [https://stackblitz.com/edit/sveltejs-kit-template-default-2o46jwja?file=src%2Froutes%2Ffolders%2F%5B...rest%5D%2F%2Bpage.svelte][1]
- 如你所见,我使用的是原生 JS,所以这个 store 不是响应式的,因为我是在 layout.ts 中初始化的。这意味着它以后在存储响应式数据时不会派上用场。
如果有人遇到过类似的事情,可以分享他们的经验,那就太好了。
这可能类似于将片段传递给父布局:
通过在后代可以写入的上下文中设置对象。
页面不会直接渲染内容,而是将面包屑数据及其内容(以代码片段的形式)设置在此上下文中。父布局
children
首先渲染以获取数据,然后从上下文/面包屑中渲染内容。在此答案中可以找到与片段相关的示例。
这有点像 hack,所以不太理想。部分逻辑也可以提取到组件中,但效果可能只是略有改善。