Svelte：通过 on:click 事件将样式和脚本传递给 href 页面答案

【问题标题】：Svelte: passing styles and scripts to the href page with on:click eventSvelte：通过 on:click 事件将样式和脚本传递给 href 页面
【发布时间】：2021-07-10 15:08:31
【问题描述】：

好吧，基本上我有一个主页，它带你到 2 个页面，这 2 个页面是相同的，它们仅在样式颜色和脚本操作上有所不同，谁能告诉我合并 2 个页面的逻辑过程并使主页的 on:click 事件区分两者。谢谢！

【问题讨论】：

您能否分享一下您想要实现的目标的至少一个 REPL？

标签： svelte

【解决方案1】：

如果您使用的是 SvelteKit，<script context='module'> 中提供了一个 load function，它可以获取一个带有 page.params 的 page 对象，其中包含 dynamic part of page path

说，page.params.slug 用于动态页面 /pages/[slug].svelte

那么load 函数应该返回一个带有props 参数的对象。说：

return {
  props: {
    pathInfo: page.params.slug
  }
}

在动态页面[slug].svelte中，只需通过<script>中的export let pathInfo像普通道具一样获取参数（注意这是普通脚本，不是上面的<script context='module'>）

<script> 知道路径信息，现在您可以通过 SvelteKit 语法 import SameComponent from '$lib/components/SameComponent' 导入相同的组件，处理样式颜色/脚本操作，然后将它们传递给组件

以下是我的 SvelteKit 项目的文件夹结构：

├── sveltekit-project/        // Root
|   ├── src/
|   |   ├── lib/
|   |   |   ├── components/
|   |   |   ... └── SameComponent.svelte
|   |   |   
|   |   ├── routes/
|   |   |   ├── main.svelte
|   |   |   ├── pages/
|   |   |   |   └── [slug].svelte
|   |   |   ...
|   |   ├── app.html
|   |   ...

【讨论】：