Для обработки параметров URL-запроса в компоненте страницы SvelteKit (page.ts) вы можете использовать хранилище $page
, предоставляемое SvelteKit. Хранилище $page
содержит информацию о текущем маршруте, включая параметры запроса.
Вот несколько методов работы с параметрами URL-запроса в SvelteKit:
- Доступ к параметрам запроса:
Вы можете получить доступ к параметрам запроса непосредственно из объекта $page.query
. Вот пример:
<script>
import { page } from '$app/stores';
let query = {};
page.subscribe(($page) => {
query = $page.query;
});
</script>
В этом примере переменная query
будет содержать объект с парами ключ-значение, представляющими параметры запроса.
- Обновление параметров запроса:
Чтобы обновить параметры запроса, вы можете использовать функцию $page.goto
. Вот пример добавления нового параметра запроса под названием page
со значением 2
:
<script>
import { page } from '$app/stores';
function goToPage2() {
page.goto('.', { query: { page: '2' } });
}
</script>
<button on:click={goToPage2}>Go to Page 2</button>
При нажатии кнопки URL-адрес будет обновлен новым параметром запроса.
- Реакция на изменения параметров запроса:
Если вы хотите реагировать на изменения параметров запроса, вы можете использовать функции жизненного цикла onMount
или beforeUpdate
вместе с page.subscribe
метод. Вот пример:
<script>
import { onMount, page } from '$app/svelte';
let query = {};
onMount(() => {
page.subscribe(($page) => {
query = $page.query;
});
});
</script>
В этом примере переменная query
будет обновляться при каждом изменении параметров запроса.