获取异步数据精简

Question

基本背景

我正在使用 Svelte 4 设计一个匿名板，现在我有一条路线

routes\board\[board_url]\

，其中有

+page.server.js

和

+page.svelte

。在

+page.server.js

中，我将从数据库中获取诸如

board_name

和

board_intro

之类的信息，如下所示：

// +page.server.js
export const load = async ({ params }) => {
  // code for get some info from `board` table
  return {
    board_name, // like 'notopic',
    board_intro, // like  'Emmmmmm',
    board_url, // like 'notopic'
  }
}

并且在

+page.svelte

中，我使用

board_url

返回的

data

中的

+page.server.js

来获取API

/board/getPost/[board_url]

来获取此板上的那些帖子，一切似乎都很好，如下所示：

// +page.svelte
<script>
import { onMount } from 'svelte';

onMount(() => {
  const board_url = window.location.href.split('/').at(-1);
  fetch(`/board/getPosts/${board_url}`).then(r => r.json())
  // other data handle
})
</script>
<!-- code for 20 posts in the board -->

问题

问题是当我使用

<a>

标签去其他板时，比如从

/board/buybuybuy

到

/board/notopic

，它不会触发

onMount()

功能，因为我知道组件已经安装了。

两个问题

1. 如何在每次更改路线后触发一次

   fetch

   请求（刷新或使用

   <a>

   ，使用商店？或其他方式
2. 因为我们可以从API获取前20个帖子，当页面滚动到底部时，我们可以使用

   IntersectionObserver

   触发另一次获取下一页，如果你能提供问题1的答案，也请给一些触发的建议获取下一页帖子

可能的方法

有一个解决方案，在

data-sveltekit-reload

标签中添加

<a>

会导致页面刷新，但我认为它似乎不像框架名称那么简洁。

Answer 1

如果您想在导航上触发功能，请尝试使用

onNavigate

生命周期而不是

onMount

// +page.svelte
<script>
import { onNavigate} from '$app/navigation';

onNavigate(() => {
  const board_url = window.location.href.split('/').at(-1);
  fetch(`/board/getPosts/${board_url}`).then(r => r.json())
  // other data handle
})
</script>
<!-- code for 20 posts in the board -->