使用 slug 进行精简跳转

Question

我正在使用 svelte 进行个人项目，我想知道是否有人有办法做到这一点。

我有一个博客页面列表，每个页面都有一个 next_page 和 previous_page url 问题是：

来自网址 /博客/[博客名称]

与 next_page = "/blog/[下一个博客名称]" previous_page = "/blog/[上一个博客名称]"

href 或 goto 函数将 url 更改为正确的 URL，但永远不会触发 +page.js 执行，通过 api 调用加载正确的博客内容

我想我在动态路由设置中遗漏了一些东西？

提前致谢！

我试过：

+page.svelte

<a href="/blog/2">
    next page
</a>

+page.server.js / +page.js

<script>
    import { goto } from '$app/navigation';
    function next_page() {
        goto("/blog/2");
        // also tested goto("/blog/2", {replaceState: true});
    }
</script>
<div on:click={() => next_page()}>
    next page
</div>

我也尝试从 .svelte 文件加载所有内容，但它也不起作用

我尝试创建一个组件，您可以在其中提供博客信息，但 .svelte 不刷新

进度：我将+page.js更改为+page.server.js，并且新的博客信息在服务器端加载，但客户端页面不刷新并且不显示/捕获新的博客信息

我也尝试过：

+page.js

import component from "./blog_content.svelte";
export function load({ fetch, params}){

    // load my blog content

    return {
        blog_data: data,
        component
    };
)

+page.svelte

{#if $page.data.component}
    <svelte:component this={$page.data.component} blog_data={blog_data}/>
{/if}

但这并没有改变任何事情

如果我尝试将 page.js 更改为 page.server.js 它会说

Error: Data returned from 'load' while rendering /blog/[blogId] is not serializable: Cannot stringify a function

Answer 1

正如错误所述：您无法序列化函数（在本例中为组件）。

如果您想动态更改正在显示的组件，则必须采用不同的方法，例如仅发送组件name并在页面上解析它。

在大多数情况下，根本没有必要，在您的示例中，您总是发送相同的组件。