Изучение SvelteKit Router: методы получения текущего пути

SvelteKit — это мощная платформа для создания веб-приложений, а встроенный маршрутизатор позволяет разработчикам легко управлять навигацией и маршрутизацией. В этой статье мы рассмотрим различные методы в SvelteKit для получения текущего пути, а также примеры кода. Понимание этих методов позволит вам создавать динамичные и адаптивные приложения.

Метод 1: Использование ловушки useLocation
Хук useLocationобеспечивает доступ к текущему объекту местоположения, который включает pathname. Вот пример:

<script>
  import { useLocation } from 'svelte-spa-router';
  let location = useLocation();
  let pathname = location.pathname;
</script>
<p>The current pathname is: {pathname}</p>

Метод 2: прямой доступ к объекту location
Вы также можете получить доступ к объекту locationнапрямую, не используя перехватчик. Вот как вы можете получить pathname:

<script>
  import { afterUpdate } from 'svelte';
  let pathname;
  afterUpdate(() => {
    pathname = window.location.pathname;
  });
</script>
<p>The current pathname is: {pathname}</p>

Метод 3. Использование функции gotoбиблиотеки svelte-spa-router.
Функция goto, предоставляемая svelte. Библиотеку -spa-routerможно использовать для перехода к определенному маршруту. Передав nullв качестве параметра маршрута, вы можете получить текущий pathnameбез запуска навигации. Вот пример:

<script>
  import { goto } from 'svelte-spa-router';
  let pathname;
  goto(null, {}, (route) => {
    pathname = route.url.pathname;
  });
</script>
<p>The current pathname is: {pathname}</p>

Метод 4: Использование модуля stores
Модуль storesSvelteKit включает хранилище path, которое обеспечивает доступ к текущему путь. Вот пример:

<script>
  import { path } from '$app/stores';
  $: {
    pathname = $path.split('?')[0]; // Remove query parameters if needed
  }
</script>
<p>The current pathname is: {pathname}</p>

В этой статье мы рассмотрели несколько методов получения текущего пути в SvelteKit. Эти методы включают использование перехватчика useLocation, прямой доступ к объекту location, использование функции gotoиз svelte-spa-routerи использование хранилища pathиз модуля stores. Используя эти методы, вы можете создавать динамичные и адаптивные приложения, которые адаптируются к текущему местоположению пользователя.