我正在使用 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()
功能,因为我知道组件已经安装了。
fetch
请求(刷新或使用<a>
,使用商店?或其他方式IntersectionObserver
触发另一次获取下一页,如果你能提供问题1的答案,也请给一些触发的建议获取下一页帖子有一个解决方案,在
data-sveltekit-reload
标签中添加<a>
会导致页面刷新,但我认为它似乎不像框架名称那么简洁。
如果您想在导航上触发功能,请尝试使用
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 -->