Question

我目前在sapper中路由受到限制。我们需要创建一个匹配两个“子弹”的路由，例如[section(foo|bar)]。这在* nix上工作正常，但在Windows上由于无效的|字符而失败。在这条路线的旁边，还有一条[slug]路线在同一级别，与所有其他路线匹配。这是有目的的，因为只有foo和bar应该呈现不同的外观，并且它们还将具有子路由。

我考虑了以下方法：

处理[slug]路由中的所有内容，方法是检查slug是foo还是bar并区别对待这些情况。 我不想这样做，因为代码将难以阅读/维护，并且有些子路由仅适用于foo和bar
创建两个文件夹foo和bar，而不是一个名为[section(foo|bar)]的文件夹。 这是不可取的，因为这将意味着很多重复的代码
为路线添加前缀，例如创建一个包含section路由的文件夹[slug]。这似乎是问题最少的选项，但我更希望使用/foo作为URL而不是/section/foo。

还有其他可能的选择吗？也许是Windows兼容的编写方式[section(foo|bar)]？还是一种定义路由RegEx的方法，而不是通过文件名？

Answer 1

好吧，我只有一个主意。和买家当心...尽管我已经尝试过了；我还没有在我的项目中使用以下概念的基础知识，最后还是使用了相同的[foo] [bar]解决方案。

Sapper的概念称为 传播路线 。它们使用[...slug].svelte文件/路由器约定表示。

想法是，在文件名中使用...spread运算符会告知路由器该参数应被视为能够容纳元素的 对象数组 。路由器应该.join('/')的所有数组元素形成路由...

如果您不想创建多个文件夹来捕获多个参数，例如[year]/[month]/...，或者如果参数数量是动态的，则可以使用传播路径参数。例如，您可以为/blog/[slug]/[year]/[month]/[day]创建一个文件，然后像这样提取参数，而不是单独捕获/blog/[...slug].svelte：

<!-- src/routes/blog/[...slug].svelte -->
<script context="module">
    export async function preload({ params }) {
        let [slug, year, month, day] = params.slug;

        return { slug, year, month, day };
    }
</script>

我为您提供的想法是利用分散路由，以便通过将查询作为这些对象之一插入来绕过管道|字符问题。

除了文件名之外，还有其他方法可以设置route-regex吗？

1 个答案: